<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bValidator documentation &amp; examples</title>
<script type="text/javascript" src="../jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../jquery.bvalidator.js"></script>
<script type="text/javascript">

function formatsource(source, htmlspecchars){
	if(source){
		if(htmlspecchars)
			source = source.replace(/&/g, '&amp;').replace(/>/g, '&gt;').replace(/</g, '&lt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;');
		source = source.replace(/\n/g, '<br />').replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;');
		return prettyPrintOne('<pre>' + source.replace(/\n/g, '<br />') + '</pre>','html');
	}
}

$(document).ready(function () { 
	
	$('.showsource_ex').each(function(){
		var id = $(this).attr('id');
		$('#' + id).html(formatsource($('#' + id + 'v').html(),1));
	});
	
	$('.showsource').each(function(){
		$(this).html( formatsource($(this).html()) )
	});
	
	$('.show_source_btt').on('click', function(){
		
		var ex = $(this).data('for-example');
		var btt = this;
		
		$('#' + ex + 's').toggle(400, function(){
			
			if($('#' + ex + 's').is(":visible"))
				$(btt).prop('value', 'Hide source');
			else
				$(btt).prop('value', 'Show source');
		});
	});
}); 

/* prettify */
var q=null;window.PR_SHOULD_USE_CONTINUATION=!0;
(function(){function L(a){function m(a){var f=a.charCodeAt(0);if(f!==92)return f;var b=a.charAt(1);return(f=r[b])?f:"0"<=b&&b<="7"?parseInt(a.substring(1),8):b==="u"||b==="x"?parseInt(a.substring(2),16):a.charCodeAt(1)}function e(a){if(a<32)return(a<16?"\\x0":"\\x")+a.toString(16);a=String.fromCharCode(a);if(a==="\\"||a==="-"||a==="["||a==="]")a="\\"+a;return a}function h(a){for(var f=a.substring(1,a.length-1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g),a=
[],b=[],o=f[0]==="^",c=o?1:0,i=f.length;c<i;++c){var j=f[c];if(/\\[bdsw]/i.test(j))a.push(j);else{var j=m(j),d;c+2<i&&"-"===f[c+1]?(d=m(f[c+2]),c+=2):d=j;b.push([j,d]);d<65||j>122||(d<65||j>90||b.push([Math.max(65,j)|32,Math.min(d,90)|32]),d<97||j>122||b.push([Math.max(97,j)&-33,Math.min(d,122)&-33]))}}b.sort(function(a,f){return a[0]-f[0]||f[1]-a[1]});f=[];j=[NaN,NaN];for(c=0;c<b.length;++c)i=b[c],i[0]<=j[1]+1?j[1]=Math.max(j[1],i[1]):f.push(j=i);b=["["];o&&b.push("^");b.push.apply(b,a);for(c=0;c<
f.length;++c)i=f[c],b.push(e(i[0])),i[1]>i[0]&&(i[1]+1>i[0]&&b.push("-"),b.push(e(i[1])));b.push("]");return b.join("")}function y(a){for(var f=a.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g),b=f.length,d=[],c=0,i=0;c<b;++c){var j=f[c];j==="("?++i:"\\"===j.charAt(0)&&(j=+j.substring(1))&&j<=i&&(d[j]=-1)}for(c=1;c<d.length;++c)-1===d[c]&&(d[c]=++t);for(i=c=0;c<b;++c)j=f[c],j==="("?(++i,d[i]===void 0&&(f[c]="(?:")):"\\"===j.charAt(0)&&
(j=+j.substring(1))&&j<=i&&(f[c]="\\"+d[i]);for(i=c=0;c<b;++c)"^"===f[c]&&"^"!==f[c+1]&&(f[c]="");if(a.ignoreCase&&s)for(c=0;c<b;++c)j=f[c],a=j.charAt(0),j.length>=2&&a==="["?f[c]=h(j):a!=="\\"&&(f[c]=j.replace(/[A-Za-z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return f.join("")}for(var t=0,s=!1,l=!1,p=0,d=a.length;p<d;++p){var g=a[p];if(g.ignoreCase)l=!0;else if(/[a-z]/i.test(g.source.replace(/\\u[\da-f]{4}|\\x[\da-f]{2}|\\[^UXux]/gi,""))){s=!0;l=!1;break}}for(var r=
{b:8,t:9,n:10,v:11,f:12,r:13},n=[],p=0,d=a.length;p<d;++p){g=a[p];if(g.global||g.multiline)throw Error(""+g);n.push("(?:"+y(g)+")")}return RegExp(n.join("|"),l?"gi":"g")}function M(a){function m(a){switch(a.nodeType){case 1:if(e.test(a.className))break;for(var g=a.firstChild;g;g=g.nextSibling)m(g);g=a.nodeName;if("BR"===g||"LI"===g)h[s]="\n",t[s<<1]=y++,t[s++<<1|1]=a;break;case 3:case 4:g=a.nodeValue,g.length&&(g=p?g.replace(/\r\n?/g,"\n"):g.replace(/[\t\n\r ]+/g," "),h[s]=g,t[s<<1]=y,y+=g.length,
t[s++<<1|1]=a)}}var e=/(?:^|\s)nocode(?:\s|$)/,h=[],y=0,t=[],s=0,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=document.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);m(a);return{a:h.join("").replace(/\n$/,""),c:t}}function B(a,m,e,h){m&&(a={a:m,d:a},e(a),h.push.apply(h,a.e))}function x(a,m){function e(a){for(var l=a.d,p=[l,"pln"],d=0,g=a.a.match(y)||[],r={},n=0,z=g.length;n<z;++n){var f=g[n],b=r[f],o=void 0,c;if(typeof b===
"string")c=!1;else{var i=h[f.charAt(0)];if(i)o=f.match(i[1]),b=i[0];else{for(c=0;c<t;++c)if(i=m[c],o=f.match(i[1])){b=i[0];break}o||(b="pln")}if((c=b.length>=5&&"lang-"===b.substring(0,5))&&!(o&&typeof o[1]==="string"))c=!1,b="src";c||(r[f]=b)}i=d;d+=f.length;if(c){c=o[1];var j=f.indexOf(c),k=j+c.length;o[2]&&(k=f.length-o[2].length,j=k-c.length);b=b.substring(5);B(l+i,f.substring(0,j),e,p);B(l+i+j,c,C(b,c),p);B(l+i+k,f.substring(k),e,p)}else p.push(l+i,b)}a.e=p}var h={},y;(function(){for(var e=a.concat(m),
l=[],p={},d=0,g=e.length;d<g;++d){var r=e[d],n=r[3];if(n)for(var k=n.length;--k>=0;)h[n.charAt(k)]=r;r=r[1];n=""+r;p.hasOwnProperty(n)||(l.push(r),p[n]=q)}l.push(/[\S\s]/);y=L(l)})();var t=m.length;return e}function u(a){var m=[],e=[];a.tripleQuotedStrings?m.push(["str",/^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/,q,"'\""]):a.multiLineStrings?m.push(["str",/^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/,
q,"'\"`"]):m.push(["str",/^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,q,"\"'"]);a.verbatimStrings&&e.push(["str",/^@"(?:[^"]|"")*(?:"|$)/,q]);var h=a.hashComments;h&&(a.cStyleComments?(h>1?m.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,q,"#"]):m.push(["com",/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\n\r]*)/,q,"#"]),e.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,q])):m.push(["com",/^#[^\n\r]*/,
q,"#"]));a.cStyleComments&&(e.push(["com",/^\/\/[^\n\r]*/,q]),e.push(["com",/^\/\*[\S\s]*?(?:\*\/|$)/,q]));a.regexLiterals&&e.push(["lang-regex",/^(?:^^\.?|[!+-]|!=|!==|#|%|%=|&|&&|&&=|&=|\(|\*|\*=|\+=|,|-=|->|\/|\/=|:|::|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|[?@[^]|\^=|\^\^|\^\^=|{|\||\|=|\|\||\|\|=|~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\s*(\/(?=[^*/])(?:[^/[\\]|\\[\S\s]|\[(?:[^\\\]]|\\[\S\s])*(?:]|$))+\/)/]);(h=a.types)&&e.push(["typ",h]);a=(""+a.keywords).replace(/^ | $/g,
"");a.length&&e.push(["kwd",RegExp("^(?:"+a.replace(/[\s,]+/g,"|")+")\\b"),q]);m.push(["pln",/^\s+/,q," \r\n\t\xa0"]);e.push(["lit",/^@[$_a-z][\w$@]*/i,q],["typ",/^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/,q],["pln",/^[$_a-z][\w$@]*/i,q],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,q,"0123456789"],["pln",/^\\[\S\s]?/,q],["pun",/^.[^\s\w"-$'./@\\`]*/,q]);return x(m,e)}function D(a,m){function e(a){switch(a.nodeType){case 1:if(k.test(a.className))break;if("BR"===a.nodeName)h(a),
a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)e(a);break;case 3:case 4:if(p){var b=a.nodeValue,d=b.match(t);if(d){var c=b.substring(0,d.index);a.nodeValue=c;(b=b.substring(d.index+d[0].length))&&a.parentNode.insertBefore(s.createTextNode(b),a.nextSibling);h(a);c||a.parentNode.removeChild(a)}}}}function h(a){function b(a,d){var e=d?a.cloneNode(!1):a,f=a.parentNode;if(f){var f=b(f,1),g=a.nextSibling;f.appendChild(e);for(var h=g;h;h=g)g=h.nextSibling,f.appendChild(h)}return e}
for(;!a.nextSibling;)if(a=a.parentNode,!a)return;for(var a=b(a.nextSibling,0),e;(e=a.parentNode)&&e.nodeType===1;)a=e;d.push(a)}var k=/(?:^|\s)nocode(?:\s|$)/,t=/\r\n?|\n/,s=a.ownerDocument,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=s.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);for(l=s.createElement("LI");a.firstChild;)l.appendChild(a.firstChild);for(var d=[l],g=0;g<d.length;++g)e(d[g]);m===(m|0)&&d[0].setAttribute("value",
m);var r=s.createElement("OL");r.className="linenums";for(var n=Math.max(0,m-1|0)||0,g=0,z=d.length;g<z;++g)l=d[g],l.className="L"+(g+n)%10,l.firstChild||l.appendChild(s.createTextNode("\xa0")),r.appendChild(l);a.appendChild(r)}function k(a,m){for(var e=m.length;--e>=0;){var h=m[e];A.hasOwnProperty(h)?window.console&&console.warn("cannot override language handler %s",h):A[h]=a}}function C(a,m){if(!a||!A.hasOwnProperty(a))a=/^\s*</.test(m)?"default-markup":"default-code";return A[a]}function E(a){var m=
a.g;try{var e=M(a.h),h=e.a;a.a=h;a.c=e.c;a.d=0;C(m,h)(a);var k=/\bMSIE\b/.test(navigator.userAgent),m=/\n/g,t=a.a,s=t.length,e=0,l=a.c,p=l.length,h=0,d=a.e,g=d.length,a=0;d[g]=s;var r,n;for(n=r=0;n<g;)d[n]!==d[n+2]?(d[r++]=d[n++],d[r++]=d[n++]):n+=2;g=r;for(n=r=0;n<g;){for(var z=d[n],f=d[n+1],b=n+2;b+2<=g&&d[b+1]===f;)b+=2;d[r++]=z;d[r++]=f;n=b}for(d.length=r;h<p;){var o=l[h+2]||s,c=d[a+2]||s,b=Math.min(o,c),i=l[h+1],j;if(i.nodeType!==1&&(j=t.substring(e,b))){k&&(j=j.replace(m,"\r"));i.nodeValue=
j;var u=i.ownerDocument,v=u.createElement("SPAN");v.className=d[a+1];var x=i.parentNode;x.replaceChild(v,i);v.appendChild(i);e<o&&(l[h+1]=i=u.createTextNode(t.substring(b,o)),x.insertBefore(i,v.nextSibling))}e=b;e>=o&&(h+=2);e>=c&&(a+=2)}}catch(w){"console"in window&&console.log(w&&w.stack?w.stack:w)}}var v=["break,continue,do,else,for,if,return,while"],w=[[v,"auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"],
"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],F=[w,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],G=[w,"abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"],
H=[G,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"],w=[w,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],I=[v,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"],
J=[v,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],v=[v,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],K=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/,N=/\S/,O=u({keywords:[F,H,w,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END"+
I,J,v],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),A={};k(O,["default-code"]);k(x([],[["pln",/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",/^<xmp\b[^>]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\S\s]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),
["default-markup","htm","html","mxml","xhtml","xml","xsl"]);k(x([["pln",/^\s+/,q," \t\r\n"],["atv",/^(?:"[^"]*"?|'[^']*'?)/,q,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/],["pun",/^[/<->]+/],["lang-js",/^on\w+\s*=\s*"([^"]+)"/i],["lang-js",/^on\w+\s*=\s*'([^']+)'/i],["lang-js",/^on\w+\s*=\s*([^\s"'>]+)/i],["lang-css",/^style\s*=\s*"([^"]+)"/i],["lang-css",/^style\s*=\s*'([^']+)'/i],["lang-css",
/^style\s*=\s*([^\s"'>]+)/i]]),["in.tag"]);k(x([],[["atv",/^[\S\s]+/]]),["uq.val"]);k(u({keywords:F,hashComments:!0,cStyleComments:!0,types:K}),["c","cc","cpp","cxx","cyc","m"]);k(u({keywords:"null,true,false"}),["json"]);k(u({keywords:H,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:K}),["cs"]);k(u({keywords:G,cStyleComments:!0}),["java"]);k(u({keywords:v,hashComments:!0,multiLineStrings:!0}),["bsh","csh","sh"]);k(u({keywords:I,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),
["cv","py"]);k(u({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["perl","pl","pm"]);k(u({keywords:J,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb"]);k(u({keywords:w,cStyleComments:!0,regexLiterals:!0}),["js"]);k(u({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes",
hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);k(x([],[["str",/^[\S\s]+/]]),["regex"]);window.prettyPrintOne=function(a,m,e){var h=document.createElement("PRE");h.innerHTML=a;e&&D(h,e);E({g:m,i:e,h:h});return h.innerHTML};window.prettyPrint=function(a){function m(){for(var e=window.PR_SHOULD_USE_CONTINUATION?l.now()+250:Infinity;p<h.length&&l.now()<e;p++){var n=h[p],k=n.className;if(k.indexOf("prettyprint")>=0){var k=k.match(g),f,b;if(b=
!k){b=n;for(var o=void 0,c=b.firstChild;c;c=c.nextSibling)var i=c.nodeType,o=i===1?o?b:c:i===3?N.test(c.nodeValue)?b:o:o;b=(f=o===b?void 0:o)&&"CODE"===f.tagName}b&&(k=f.className.match(g));k&&(k=k[1]);b=!1;for(o=n.parentNode;o;o=o.parentNode)if((o.tagName==="pre"||o.tagName==="code"||o.tagName==="xmp")&&o.className&&o.className.indexOf("prettyprint")>=0){b=!0;break}b||((b=(b=n.className.match(/\blinenums\b(?::(\d+))?/))?b[1]&&b[1].length?+b[1]:!0:!1)&&D(n,b),d={g:k,h:n,i:b},E(d))}}p<h.length?setTimeout(m,
250):a&&a()}for(var e=[document.getElementsByTagName("pre"),document.getElementsByTagName("code"),document.getElementsByTagName("xmp")],h=[],k=0;k<e.length;++k)for(var t=0,s=e[k].length;t<s;++t)h.push(e[k][t]);var e=q,l=Date;l.now||(l={now:function(){return+new Date}});var p=0,d,g=/\blang(?:uage)?-([\w.]+)(?!\S)/;m()};window.PR={createSimpleLexer:x,registerLangHandler:k,sourceDecorator:u,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",
PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ"}})();


</script>
<link href="../bvalidator.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.main_content {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 9pt;
	background-color: #333;
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	padding: 5px
}
.header {
	font-family: Verdana, Geneva, sans-serif;
	width: 800px;
	margin-right: auto;
	margin-left: auto
}
.header h1 {
	font-size: 40pt;
	color: #000;
	display: inline
}
.content {
	background-color: #FFF;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 15px;
	padding-left: 5px
}
.insource {
	font-family: "Courier New", Courier, monospace
}
.ex6_errmsg {
	background-color: #333;
	font-size: 10px;
	border: 1px solid #999;
	color: #F90;
	display: none;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-moz-border-radius-bottomleft: 0;
	-moz-border-radius-topleft: 0;
	-webkit-border-bottom-left-radius: 0;
	-moz-border-radius-bottomleft: 0;
	border-bottom-left-radius: 0;
	-webkit-border-top-left-radius: 0;
	-moz-border-radius-topleft: 0;
	border-top-left-radius: 0;
	-moz-box-shadow: 0 0 6px #ddd;
	-webkit-box-shadow: 0 0 6px #ddd;
	box-shadow: 0 0 6px #ddd;
	white-space: nowrap;
	padding-top: 2px;
	padding-right: 10px;
	padding-bottom: 2px;
	padding-left: 5px;
	font-family: Verdana, Geneva, sans-serif;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	filter: alpha(opacity=90);
	opacity: 0.9;
	filter: alpha(opacity=90)
}
.ex6_invalid {
	background-color: #F96
}
#ex10errors {
	border: 1px solid #C00;
	font-weight: bold;
	display: none;
	padding: 2px
}
/* tables */
.table1 td {
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #999;
	padding-right: 5px;
	padding-left: 5px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #CCC
}
.main_content h1 {
	font-size: 16pt;
	font-weight: bold;
	margin-top: 15px;
	color: #FFF;
	margin-bottom: 15px;
	background-color: #333;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 5px;
	left: -25px;
	position: relative;
	display: inline-block;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px
}
h2 {
	font-size: 14pt;
	font-weight: bold;
	margin-top: 20px;
	padding-left: 15px;
	color: #FFF
}
h3 {
	font-size: 10pt;
	font-weight: bold
}
.by {
	font-size: 8pt;
	position: relative;
	color: #CCC;
	text-align: right;
	margin-bottom: -20px;
	font-style: italic
}
.table1 tr.disabled {
	color: #999
}
.table1 th {
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #CCC;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #666;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
	color: #333
}
.table1 td {
	padding: 5px;
}
.table1 tr:hover {
	background-color: #E6ECFF
}
.showsource, .showsource_ex {
	font-family: "Courier New", Courier, monospace;
	white-space: pre;
	background-color: #F0F0F0;
	margin-bottom: 10px;
	padding: 5px;
	overflow: scroll
}
.fp {
	font-weight: bold;
	color: #06F
}
.donatecont {
	background-color: #6CFF8A;
	padding: 5px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	margin-top: 25px;
	margin-right: 15px;
	margin-bottom: 15px;
	margin-left: 15px;
	text-align: center;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11pt;
	font-weight: bold;
	color: #333;
	border: 1px solid #666
}

/* show source button */
.show_source_btt {
	background-color:#FC6;
	border: 1px solid #666;
	float: right;
	width: 10em;
	-webkit-border-top-left-radius:6px;
	-moz-border-radius-topleft:6px;
	border-top-left-radius:6px;
	-webkit-border-bottom-left-radius:6px;
	-moz-border-radius-bottomleft:6px;
	border-bottom-left-radius:6px;
	font-size: 11pt;
	color: #333;
	cursor: pointer;
}

/* prettify */
.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}

</style>
<link href="../themes/bvalidator.theme.orange.css" rel="stylesheet" type="text/css" />
<link href="../themes/bvalidator.theme.red.css" rel="stylesheet" type="text/css" />
<link href="../themes/bvalidator.theme.gray2.css" rel="stylesheet" type="text/css" />
<link href="../themes/bvalidator.theme.postit.css" rel="stylesheet" type="text/css" />
<link href="../themes/bvalidator.theme.bootstrap.rt.css" rel="stylesheet" type="text/css" />
<link href="../themes/bvalidator.theme.bootstrap.rc.css" rel="stylesheet" type="text/css" />
<link href="../themes/bvalidator.theme.gray3.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div class="header">
	<h1>bValidator</h1> 
<span style="font-size: 12pt;">documentation | <a href="#examples"><strong>examples</strong></a></span> | <a href="#themes">themes</a></div>
<div class="main_content"><!-- section -->
	
	
	<h1>What is bValidator?</h1>
	<div class="content">
		<p>bValidator is a <a href="http://jquery.com/" target="_blank">jQuery</a> plug-in for client side form validation. 
			It supports fully customized error messages defined with template and CSS, many validation functions (<a href="#actions">actions</a>) like date, email, URL, IP address, validation of dynamic forms, customized validation functions and more. </p>
		<p>Home page &amp; <strong>download</strong>: <a href="http://code.google.com/p/bvalidator/">http://code.google.com/p/bvalidator/</a></p>
		<p><br />
		</p>
<h3>Contents of this document:</h3>
		<ul>
			<li><a href="#setup">Setup</a></li>
			<li><a href="#options">Configuration options</a>
<ul>
					<li><a href="#callbacks">Callbacks</a></li>
					<li><a href="#localization">Error messages and localization</a></li>
				</ul>
			</li>
			<li><a href="#actions">Validator actions</a></li>
			<li><a href="#api">API functions</a></li>
			<li><a href="#examples"><strong>Examples</strong></a>
				<ol>
					<li><a href="#allvalidators">All validators in action</a></li>
					<li><a href="#inputerrmsgs">Input specific error message</a></li>
					<li><a href="#customaction">Custom validators</a></li>
					<li><a href="#dynamicforms">Dynamic forms</a></li>
					<li><a href="#serversidevalidation">Server side validation</a></li>
					<li><a href="#positionstyle">Error message position and style</a></li>
					<li><a href="#divvalidation">Instance on &lt;div&gt; element</a></li>
					<li><a href="#groups">Groups of checkboxes and radio buttons</a></li>
					<li><a href="#oldbrowser">For old browsers</a></li>
					<li><a href="#allerrors">Put error messages into container</a></li>
					<li><a href="#dependinginputs">Depending inputs</a></li>
					<li><a href="#moreinstances">More types of error messages</a></li>
					<li>						<a href="#justmessages">Just displaying messages</a></li>
					<li><a href="#usingmodifiers">Using modifiers</a></li>
					<li><a href="#validationajaxaction">Server side validation with <span class="insource">ajax</span> action</a></li>
				</ol>
			</li>
			<li><a href="#themes"><strong>Themes</strong></a>
				<ol>
					<li><a href="#themegray2">Gray 2</a></li>
					<li><a href="#themebootstrap_rc">Bootstrap (right-center)</a></li>
					<li><a href="#themebootstrap_rt">Bootstrap (right-top)</a></li>
					<li><a href="#themegray3">Gray 3</a></li>
					<li><a href="#themepostit">Post-it</a></li>
					<li><a href="#themeorange">Orange</a></li>
					<li><a href="#themered">Red</a></li>
				</ol>
			</li>
		</ul>
		<form action="https://www.paypal.com/cgi-bin/webscr" method="post" id="donate_form" style="text-align:center">
			<input type="hidden" name="cmd" value="_s-xclick" />
			<input type="hidden" name="hosted_button_id" value="WHSA95VNSYHSG" />
			<select name="os0" style="margin-top:5px;margin-bottom:5px;">
				<option value="-">- $1.00</option>
				<option value="--">-- $3.00</option>
				<option value="---" selected="selected">--- $5.00</option>
				<option value="----">---- $10.00</option>
				<option value="-----">----- $15.00</option>
				<option value="------">------ $20.00</option>
			</select>
			<input type="hidden" name="currency_code" value="USD" />
			<br />
			<input name="submit" type="image" src="https://www.paypalobjects.com/WEBSCR-640-20110429-1/en_US/i/btn/btn_donate_LG.gif" alt="Donate via PayPal" title="Donate via PayPal" align="middle" border="0" />
		</form>
	</div>

	
<!-- section -->
	
	
	<h1>Setup<a name="setup" id="setup"></a></h1>
	<div class="content">
		<p>Download bValidator from <a href="http://code.google.com/p/bvalidator/downloads/list" target="_blank">here</a>.</p>
		<p>For a basic setup you will need to include into your web page which contains a form you want to validate <span class="insource">jquery.bvalidator.js</span> (or <span class="insource">jquery.bvalidator-yc.js</span>) file and jQuery:</p>
		<blockquote>
			<p><strong>include javascript:</strong></p>
			<pre class="showsource">
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery-X.X.X.min.js&quot;&gt;&lt;/script&gt;<br />&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.bvalidator.js&quot;&gt;&lt;/script&gt;</pre>
			<p><strong>or</strong> instead of <span class="insource">jquery.bvalidator.js</span> include <span class="insource">jquery.bvalidator-yc.js</span> which is the same file but compressed and  smaller in size:</p>
			<pre class="showsource">&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.bvalidator-yc.js&quot;&gt;&lt;/script&gt;</pre>
		</blockquote>
		<p>You will also need to include CSS file with styles for  message tooltips:</p>
		<blockquote>
			<p><strong>include CSS:</strong></p>
			<pre class="showsource">&lt;link href=&quot;bvalidator.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;</pre>
		</blockquote>
		<p>The web page should have elements you want to validate. This is usually a form, but validator can also work on input fields which are not inside the form (see <a href="#divvalidation">example</a>). Note the <span class="insource"><strong>data-bvalidator</strong></span> input field attribute which tells bValidator which validation functions (actions) to invoke for the field. The name of that attribute can be changed and this can be for example <span class="insource">class</span> or <span class="insource">rel</span>, see <a href="#options">options</a> for details.</p>
		<blockquote>
			<p><strong>HTML:</strong></p>
			<pre class="showsource">&lt;form id=&quot;myform&quot;&gt;
	Email: &lt;input type=&quot;text&quot; data-bvalidator=&quot;required,email&quot;/&gt;<br />	Url: &lt;input type=&quot;text&quot; data-bvalidator=&quot;url&quot;/&gt;
&lt;/form&gt;</pre>
		</blockquote>
		<p>And, at last, you need to initialize bValidator for the form:</p>
		<blockquote>
			<p><strong>javascript:</strong></p>
			<pre class="showsource">&lt;script type=&quot;text/javascript&quot;&gt;
	$('#myform').bValidator();
&lt;/script&gt;
</pre>
			<p>This code should be inserted after the form <strong>or</strong> you can  use jQuery's <span class="insource">$(document).ready</span> to execute the script as soon as the webpage's Document Object Model (DOM) has been loaded. In that case this javascript code can be before or after the form:</p>
			<pre class="showsource">&lt;script type=&quot;text/javascript&quot;&gt;
	$(document).ready(function () {<br />		$('#myform').bValidator();<br />	});<br />&lt;/script&gt;
</pre>
		</blockquote>
	</div>
	
	
<!-- section -->
	
	
	<h1>Configuration options<a name="options" id="options"></a></h1>
	<div class="content">
		<p>bValidator can be configured<strong> by passing object with options  to the validator constructor</strong><strong><a name="optionsconstructor" id="bValidatorOptions2"></a></strong>. Passed options will override default options.</p>
		<blockquote>
			<pre class="showsource">&lt;script type=&quot;text/javascript&quot;&gt;
	
	var options = {
		singleError: true,
		showCloseIcon: false
	};

	$('#myform').bValidator(options);

&lt;/script&gt;</pre>
		</blockquote>
		<p><strong>OR</strong> by defining a <strong>global object with options</strong> called <strong>bValidatorOptions<a name="bValidatorOptions" id="bValidatorOptions"></a></strong>. bValidatior will check if this object exists and if does, will load options from it and override default options.</p>
		<blockquote>
			<pre class="showsource">&lt;script type=&quot;text/javascript&quot;&gt;
	
	var bValidatorOptions = {
		singleError: true,
		showCloseIcon: false
	};

	$('#myform').bValidator();

&lt;/script&gt;</pre>
		</blockquote>
		<p><strong>OR BOTH</strong>, you can define a global <strong>bValidatorOptions</strong> object and also pass options to the validator<strong> constructor</strong>. In that case options from the <span class="insource">bValidatorOptions</span> object override default options and options passed as argument to constructor will override options from the <span class="insource">bValidatorOptions</span> object.		</p>
		<table width="100%" border="0" cellpadding="0" cellspacing="0" class="table1">
			<tr>
				<th nowrap="nowrap">Option</th>
				<th>Default</th>
				<th>Description</th>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">singleError</td>
				<td class="insource">false</td>
				<td>Enabling this shows only first validation error at a time. </td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">offset</td>
				<td nowrap="nowrap" class="insource">{x:-23, y:-4}</td>
				<td>Fine tunes the error message tooltip position specified with the <span class="insource"><a href="#position">position</a></span> property.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">position</td>
				<td nowrap="nowrap" class="insource">{x:'right', y:'top'}</td>
				<td><span class="fp"><a name="position" id="errorMessageAttr4"></a></span>Specifies the position of the error message tooltip. Valid values for <strong>x</strong> are: <span class="insource">left</span>, <span class="insource">center</span>,<span class="insource"> right</span> and for <strong>y</strong> are <span class="insource">top</span>,<span class="insource"> center</span>,<span class="insource"> bottom</span></td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">showCloseIcon</td>
				<td class="insource">true</td>
				<td><span class="fp"><a name="showCloseIcon" id="errorMessageAttr2"></a></span>Controls if the error message tooltip has a close icon. If <span class="insource">true</span> user can click on it and close the error message tooltip.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">showErrMsgSpeed</td>
				<td class="insource">normal</td>
				<td> Error message's fade-in speed. Values can be '<span class="insource">fast</span>', '<span class="insource">normal</span>', '<span class="insource">slow</span>' or number of miliseconds.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">classNamePrefix</td>
				<td class="insource">bvalidator_</td>
				<td>Prefix for CSS class names. This prefix will be added to <a href="#closeIconClass">closeIconClass</a>, <a href="#errMsgClass">errMsgClass</a>, <a href="#errorClass">errorClass</a> and <a href="#validClass">validClass</a> values.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">closeIconClass</td>
				<td nowrap="nowrap" class="insource">close_icon</td>
				<td><span class="fp"><a name="closeIconClass" id="errorMessageAttr3"></a></span>CSS class for the error message tooltip close icon.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">errMsgClass</td>
				<td nowrap="nowrap" class="insource">errmsg</td>
				<td><span class="fp"><a name="errMsgClass" id="errorMessageAttr5"></a></span>CSS class for the error message tooltip (error messages container).</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">errorClass</td>
				<td nowrap="nowrap" class="insource">invalid</td>
				<td><span class="fp"><a name="errorClass" id="errorMessageAttr6"></a></span>CSS class for the input field containing an invalid value. Will not be applied on checkboxes and radio buttons.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">validClass</td>
				<td class="insource">&nbsp;</td>
				<td><span class="fp"><a name="validClass" id="errorMessageAttr7"></a></span>CSS class for the input field containing a valid value. Will not be applied on checkboxes and radio buttons.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">lang</td>
				<td class="insource">en</td>
				<td>Language for localization.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">errorMessageAttr</td>
				<td nowrap="nowrap" class="insource">data-bvalidator-msg</td>
				<td><span class="fp"><a name="errorMessageAttr" id="errorMessageAttr"></a></span>Input field attribute which holds error message text. Message from this attribute  will override default messages or localized error messages.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">validateActionsAttr</td>
				<td class="insource">data-bvalidator</td>
				<td><span class="fp"><a name="validateActionsAttr" id="validateActionsAttr"></a></span>Input field attribute which tells validator which validation actions to invoke for the field.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">forceValidAttr</td>
				<td class="insource">data-bvalidator-forcevalid</td>
				<td><a name="forceValidAttr" id="validateActionsAttr6"></a>Input field attribute which tells validator to act like the field is valid regardless of actions set by <span class="insource">data-bvalidator</span> attribute. Value should be set to  '<span class="insource">true</span>' to disable validation. Validation is also disabled for hidden or disabled fields, but sometimes you don't want to make field hidden or disabled and still need to disable (or re-enable) validation on the field.  I you set this attribute on the form element (or container element) on wich validator is binded then validation is skipped on submit. You can also disable validation by removing <span class="insource">data-bvalidator</span> attribute.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">modifyActionsAttr</td>
				<td class="insource">data-bvalidator-modifier</td>
				<td><a name="modifyActionsAttr" id="validateActionsAttr7"></a>Input field attribute which tells validator which modifiers to invoke for the field.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">paramsDelimiter</td>
				<td class="insource">:</td>
				<td><a name="paramsDelimiter" id="validateActionsAttr8"></a>Options delimiter for validaton function parameters inside square brackets []. </td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">actionsDelimiter</td>
				<td class="insource">,</td>
				<td><a name="actionsDelimiter" id="validateActionsAttr9"></a>Validator functions (actions) delimiter in <span class="insource">validateActionsAttr</span> attribute.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">validateOn</td>
				<td class="insource">null</td>
				<td><span class="fp"><a name="validateOn" id="validateActionsAttr2"></a></span>On which input field event to start validation. Values can be <span class="insource">null</span>, <span class="insource">'change'</span>, <span class="insource">'blur'</span>, <span class="insource">'keyup'.</span> See this option in action in <a href="#positionstyle">this</a> or <a href="#moreinstances">this</a> example. This option will be not applied on checkboxes and radio buttons.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">errorValidateOn</td>
				<td class="insource">keyup</td>
				<td><span class="fp"><a name="errorValidateOn" id="validateActionsAttr3"></a></span>On which input field event to start validation if error message is already shown. Values can be <span class="insource">null</span>, <span class="insource">'change'</span>, <span class="insource">'blur'</span>, <span class="insource">'keyup'</span></td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">scrollToError</td>
				<td class="insource">true</td>
				<td>If first error message is not visible on the screen, page will be scrolled up or down to be visible.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">template</td>
				<td class="insource">&lt;div class=&quot;{errMsgClass}&quot;&gt;<br />					&lt;em/&gt;{message}&lt;/div&gt;</td>
				<td><p><span class="fp"><a name="template" id="validateActionsAttr5"></a></span>HTML template for the error message tooltip. This HTML code will be put inside the container div element and appended after the input field. <span class="insource">{errMsgClass}</span> will be replaced with value of the <span class="insource"><a href="#errMsgClass">errMsgClass</a></span> option and <span class="insource">{message}</span> will be replaced with error messages text.</p></td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">templateCloseIcon</td>
				<td class="insource">&lt;div style=&quot;display:table&quot;&gt;<br />					&lt;div style=&quot;display:table-cell&quot;&gt;<br />
				{message}&lt;/div&gt;<br />				
				&lt;div style=&quot;display:table-cell&quot;&gt;<br />
				&lt;div class=&quot;{closeIconClass}&quot;&gt;x&lt;/div&gt;<br />				&lt;/div&gt;&lt;/div&gt;</td>
				<td><span class="fp"><a name="templateCloseIcon" id="validateActionsAttr4"></a></span>This piece of HTML will be used  when <span class="insource"><a href="#showCloseIcon">showCloseIcon</a></span> option is <span class="insource">true</span>. <span class="insource">{message}</span> tag in the HTML code specified by <span class="insource"><a href="#template">template</a></span> option will be replaced by this code. With these two options you have full control over the error messages layout. See <a href="#oldbrowser">example 9</a> where this option is used to support IE6.<br />
				<span class="insource">{message}</span> tag in this code will be replaced with the error messages text, <span class="insource">{closeIconClass}</span> will be replaced with the value of <span class="insource"><a href="#closeIconClass">closeIconClass</a></span> option.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">noMsgIfExistsForInstance</td>
				<td class="insource">empty array</td>
				<td>This option can be usefull if you are using more bValidator instances and you don't want to show message for element if already exists for instance specified by this option. If message is already shown it will not be removed.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">validateOnSubmit<a name="validateOnSubmit" id="validateOnSubmit"></a></td>
				<td class="insource">true</td>
				<td>If <span class="insource">true</span>, validation will occur on form submit if validator is bind to a form.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">stopSubmitPropagation</td>
				<td class="insource">true</td>
				<td>If <span class="insource">true</span>,  submit event will be stopped on error if validator is bind to a form. This option is considered only if value of <a href="#validateOnSubmit"><span class="insource">validateOnSubmit</span></a><span class="insource"></span> option is true.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">autoModifiers</td>
				<td class="insource">{'digit':  ['trim'],<br />
					'number': ['trim'],<br />
					'email':  ['trim'],<br />
					'url':    ['trim'],<br />
					'date':   ['trim'],<br />
					'ip4':    ['trim'],<br />
				'ip6':    ['trim']}</td>
				<td><p><span class="fp"><a name="autoModifiers" id="validateOnSubmit4"></a></span>This option tells which <a href="#actions">modifiers</a> to automatically call for some validation action. By default <a href="#trim" class="insource">trim</a> modifier is called for stated actions. So you don't have to explicitly put modifier into <span class="insource">data-bvalidator-modifier</span> attribute. You can put more auto modifiers for one action and use parameters just like in the attribute. For example:<br />
				<span class="insource">'myValidator': ['trim', 'myMod', 'myMod2[1:3]']</span></p></td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">ajaxAnswerValid</td>
				<td class="insource">'ok'</td>
				<td><span class="fp"><a name="ajaxAnswerValid" id="validateOnSubmit2"></a></span>Valid response for ajax validation with the <a href="#ajax">ajax</a> action. If value is valid ajax request should return this string.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">ajaxDelay</td>
				<td class="insource">300</td>
				<td>Delay for asynchronous ajax request.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">ajaxOptions</td>
				<td class="insource">{cache: false}</td>
				<td>Options for ajax request. See <a href="http://api.jquery.com/jQuery.ajax/" target="_blank">jQuery documentation</a>. Note that some options like <span class="insource">data</span> and <span class="insource">async</span> will be changed by bValidator before making the request.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">ajaxParamName</td>
				<td class="insource">'bValue'</td>
				<td><span class="fp"><a name="ajaxParamName" id="validateOnSubmit3"></a></span>Name of the GET/POST parameter  with the value to validate on the server side.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">ajaxParams</td>
				<td class="insource">null</td>
				<td>Object or function that returns an object with values that are sent to the server with the request. For example: <span class="insource">{'id':123}</span>.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">validateTillInvalid</td>
				<td class="insource">false</td>
				<td><p>By default, if there are more validation actions in <span class="insource">data-bvalidator</span> attribute they are all invoked when validation is triggered. <br />
					If you set this option to <span class="insource">true</span> actions will be invoked till value is invalid by one action and check by rest of the actions will be skipped. For example: <br />
						<span class="insource">data-bvalidator=&quot;number,max[10]&quot;</span><br />
				if check with <span class="insource">number</span> action fails <span class="insource">max</span> action will not be called.</p></td>
			</tr>
		</table>
	</div>
	
	
<!-- section -->
	
	
	<h2>Callbacks<a name="callbacks" id="callbacks"></a></h2>
	<div class="content">
		<p>Callbacks are user defined <strong>functions that are called by validator in a certain moment</strong>. Callbacks are defined the same way as configuration options.	Here is an example	of defining callback:</p>
		<blockquote>
			<pre class="showsource">&lt;script type=&quot;text/javascript&quot;&gt;
	
	var options = {
		onBeforeValidate: function(element, action){
			// do something here
		},
	};

	$('#myform').bValidator(options);

&lt;/script&gt;</pre>
		</blockquote>
		<table width="100%" border="0" cellpadding="0" cellspacing="0" class="table1">
			<tr>
				<th nowrap="nowrap">Callback</th>
				<th>Arguments</th>
				<th>Description</th>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">onBeforeElementValidation</td>
				<td><ol>
					<li>jQuery object containing input field</li>
				</ol></td>
				<td>Called  before the validation routine starts for each element (input field) that is validated. Returning <span class="insource">false</span> will cause the validation to be skipped for that element.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">onAfterElementValidation</td>
				<td><ol>
					<li><span class="fp"><a name="onAfterElementValidation" id="onAfterAllValidations2"></a></span>jQuery object containing input field</li>
					<li>array containing all error messages for the element</li>
				</ol></td>
				<td>Called  after the validation routine ends for each element (input field) that is validated. <br />
					If  <span class="insource">false</span>   is returned error messages (if any) won't be displayed, and binding events (<a href="#validateOn" class="insource">validateOn</a>, <a href="#errorValidateOn" class="insource">errorValidateOn</a>) to input fields will be skipped.<br />
					Returning <span class="insource">0</span> (zero) will only disable bValidator error messages.  See <a href="#allerrors">example 10</a>.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">onBeforeAllValidations</td>
				<td><ol>
					<li>jQuery object containing all inputs that will be validated</li>
				</ol></td>
				<td>Called once before  the validation is started. Returning <span class="insource">false</span> will skip the validation. For example, if you validate a form with more input elements this callback will be called once before all validations and if <span class="insource">false</span> is returned the form will not be validated at all.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">onAfterAllValidations</td>
				<td><ol>
					<li><span class="fp"><a name="onAfterAllValidations" id="onAfterAllValidations"></a></span>jQuery object containing all inputs that are validated</li>
					<li>validation result (true or false)</li>
				</ol></td>
				<td>Called once after all validations are done. For example, if you validate a form with more input elements this callback will be called once after all validations are done and error messages (if any) are displayed. See <a href="#allerrors">example 10</a>.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">onBeforeValidate</td>
				<td><ol>
						<li><span class="fp"><a name="onBeforeValidate" id="onBeforeValidate"></a></span>jQuery object containing input field</li>
						<li>string validator action (example: <span class="insource">min[5]</span>)</li>
					</ol></td>
				<td><p>Called before the validation routine starts for each validation action. Returning <span class="insource">false</span> will cause the validation to be skipped for that validator action.<br />
				This callback function will be called for each validation action so if you put more actions on one form element for example: <span class="insource">max[10],email,required</span> this callback will be called two times (for <span class="insource">max</span> and for <span class="insource">email</span>).</p></td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">onAfterValidate</td>
				<td><ol>
						<li>jQuery object containing input field</li>
						<li>string validator action (example: <span class="insource">max[10]</span>)</li>
						<li>validation result (true or false)</li>
					</ol></td>
				<td>Called after  each validation routine ends. Returning <span class="insource">false</span> will stop executing that validator action,  displaying error messages and binding events (<a href="#validateOn" class="insource">validateOn</a>, <a href="#errorValidateOn" class="insource">errorValidateOn</a>) to input fields will be skipped.<br />
				Will be called for each validation action (see <a href="#onBeforeValidate">onBeforeValidate</a> description).</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">onValidateFail</td>
				<td><ol>
						<li>jQuery object containing input field</li>
						<li>string validator action (example: <span class="insource">max[10]</span>)</li>
						<li>array containing all error messages for the element</li>
					</ol></td>
				<td>Called after validation  fails.<br />
				Will be called for each validation action that fails (see <a href="#onBeforeValidate">onBeforeValidate</a> description).</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">onValidateSuccess</td>
				<td><ol>
						<li>jQuery object containing input field</li>
						<li>string validator action (example: <span class="insource">max[10]</span>)</li>
					</ol></td>
				<td>Called after validation is sucessfull.<br />
				Will be called for each validation action that is successful  (see <a href="#onBeforeValidate">onBeforeValidate</a> description).</td>
			</tr>
		</table>
	</div>
	
	
<!-- section -->
	
	
	<h2>Error messages and localization<a name="localization" id="localization"></a></h2>
	<div class="content">
		<p>bValidator can retrieve error message from:</p>
		<ul>
			<li><a href="#errorMessageAttr" class="insource">data-bvalidator-msg</a> attribute</li>
			<li><a href="#options">configuration options</a> object passed as an <a href="#optionsconstructor">argument to constructor</a></li>
			<li> global <a href="#bValidatorOptions" class="insource">bValidatorOptions</a> object</li>
			<li><span class="insource">data-bvalidator-msg-<em>actionName</em></span> attribute. Replace <span class="insource">actionName</span> with the name of <a href="#validationactions">validation action</a> (see <a href="#validationajaxaction">example</a>).</li>
		</ul>
		<p>			Most of the validator actions has error message named same as the action in configuration object. If you use some custom validation function (<a href="#customaction">example</a>) you can also add error message named same as the validation function into the configuration object.<br />
			You can use <span class="insource">{0}</span>, <span class="insource">{1}</span>, <span class="insource">{2}</span>, <span class="insource">{3},...</span> tags in error messages and they will be replaced with validator action parameters in <span class="insource">[]</span>.</p>
<p>Error messages can be localized (translated). To translate messages  you need to <strong>pass translated messages as <a href="#options">options</a></strong> to validator constructor:</p>
		<blockquote>
			<pre class="showsource">&lt;script type=&quot;text/javascript&quot;&gt;
	
	var options = {
		lang: 'hr',
		errorMessages: {<br />			hr: {<br />				'default':    'Ispravite ovu vrijednost.',<br />				'equalto':    'Unesite ponovno istu vrijednost.',<br />				'differs':    'Unesite različitu vrijednost.',
				....<br />			}<br />		}
	};

	$('#myform').bValidator(options);

&lt;/script&gt;</pre>
		</blockquote>
		<p> <strong>OR</strong> define <strong>global </strong><span class="insource"><a href="#bValidatorOptions">bValidatorOptions</a></span><strong> object with translated error messages</strong> that will be used in all validator instances:</p>
		<blockquote>
			<pre class="showsource">&lt;script type=&quot;text/javascript&quot;&gt;
	
	var bValidatorOptions = {
		lang: 'hr',
		errorMessages: {<br />			hr: {<br />				'default':    'Ispravite ovu vrijednost.',<br />				'equalto':    'Unesite ponovno istu vrijednost.',<br />				'differs':    'Unesite različitu vrijednost.',
				....<br />			}<br />		}
	};

	$('#myform').bValidator();

&lt;/script&gt;</pre></blockquote>
	You can see all default English error messages in <span class="insource">jquery.bvalidator.js</span> file (search for the first occurrence of '<span class="insource">errorMessages</span>' inside the file). If you  made translation please post it to the <a href="http://groups.google.com/group/bvalidator">bValidator discussion group</a>. I will also put it on the <a href="http://code.google.com/p/bvalidator/downloads/list">download page</a>.</div>
	
	
<!-- section -->
	
	
	<h1>Validator actions<a name="actions" id="actions"></a></h1>
	<div class="content">
		<p>There are two types of validator actions:	validation actions and modifying actions (from version 0.7).</p>
		<p><strong>Validation actions</strong> (validators) are  functions that checks if a value is valid.</p>
		<p><strong>Modifying actions</strong> (modifiers) are functions that change the value of the field before validation. This is useful if you want to clean up user input for example to trim whitespaces before validation.		</p>
		<p>Validations which validator will perform on a single input field are stated by default in <span class="insource">data-bvalidator</span> attribute and modifiers are stated in <span class="insource">data-bvalidator-modifier</span> attribute. <br />
		You can use different attributes like <span class="insource">class</span> or <span class="insource">rel</span> if you need that your HTML is valid. Just set the name of the attribute  in <span class="insource"><a href="#validateActionsAttr">validateActionsAttr</a></span> or <a href="#modifyActionsAttr" class="insource">modifyActionsAttr</a> option.</p>
		<p>Some  actions can have parameters and those are stated in square brackets  after the action name and delimited with '<span class="insource">:</span>'. For example: <span class="insource">[param1:param2:param3]</span>. You can have unlimited number of parameters per action.</p>
		<p>For example:</p>
		<blockquote>
			<pre class="showsource">&lt;input type=&quot;text&quot; data-bvalidator=&quot;maxlength[10]&quot; <span class="insource">data-bvalidator-modifier</span>=&quot;trim&quot; /&gt;<br />&lt;input type=&quot;text&quot; data-bvalidator=&quot;max[10],email,required&quot; /&gt;<br />&lt;input type=&quot;text&quot; data-bvalidator=&quot;differs[someElementID]&quot; /&gt;</pre>
		</blockquote>
		<p>&nbsp;</p>
<h3>Validation	actions<a name="validationactions" id="actions2"></a></h3>
		<p>Here  are listed built-in validator actions, but it is very simple to add custom validation functions (see <a href="#customaction">example</a> and <a href="#getActions">getActions</a> API function).</p>
		<table width="100%" border="0" cellpadding="0" cellspacing="0" class="table1">
			<tr>
				<th nowrap="nowrap">Validator</th>
				<th>Parameters</th>
				<th>Description</th>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">alpha</td>
				<td>&nbsp;</td>
				<td>Checks if all characters are alphabetic.  Empty space (' '), underscore(_), minus(-) and period (.) are also valid.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">alphanum</td>
				<td>&nbsp;</td>
				<td>Checks if all characters are alphanumeric.  Empty space (' '), underscore(_), minus(-) and period (.) are also valid.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">digit</td>
				<td>&nbsp;</td>
				<td>Checks if all characters are digits.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">number</td>
				<td>&nbsp;</td>
				<td>Checks if value is a number.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">email</td>
				<td>&nbsp;</td>
				<td>Checks if value is a valid E-mail.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">image</td>
				<td>&nbsp;</td>
				<td>Checks if value ends with  image file extension jpg, jpeg, png, gif or bmp. Can be useful   for file fields.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">url</td>
				<td>&nbsp;</td>
				<td>Checks if value is a valid URL.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">regex</td>
				<td><ol>
						<li>pattern</li>
						<li>modifier (optional)</li>
				</ol></td>
				<td><p>Checks if value matches pattern given by parameter.<br />
				If you'll need to use characters like <span class="insource">[]</span>,<span class="insource">:</span> in pattern which are also used by validator to parse action arguments you'll have to write custom validator function like in this <a href="#customaction">example</a>.<br />
				As second parameter regular expression modifier can be passed.</p></td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">date</td>
				<td><ol>
						<li>date format</li>
					</ol></td>
				<td>Checks if value is a valid date in format specified by action parameter. Format can be any combination of <span class="insource">mm</span>,<span class="insource"> dd</span>,<span class="insource"> yyyy</span> with one character separator between. Example: '<span class="insource">mm.dd.yyyy</span>' or '<span class="insource">yyyy-mm-dd</span>'.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">required</td>
				<td>&nbsp;</td>
				<td><p><span class="fp"><a name="required" id="required"></a></span>Is a value required.</p>
					<p>If you put <span class="insource">required</span> in front of other actions like <span class="insource">data-bvalidator=&quot;required,max[10],email&quot;</span> then error message that field is required will be shown in error messages tooltip with other error messages.</p>
					<p>If you put <span class="insource">required</span> after  other actions like <span class="insource">data-bvalidator=&quot;max[10],email,required&quot;</span> then error message that field is required will not be shown in error messages tooltip if there are some   more error messages.</p>
					<p><strong>NOTE</strong> that if a field is not marked as <span class="insource">required</span> and it is empty it will not be validated at all. For example, if you have field with <span class="insource">data-bvalidator=&quot;email&quot;</span> and you leave it empty, <span class="insource">email</span>  action will not be called. If you want to call validator action even if value is empty and not required use <a href="#valempty">valempty</a>.</p></td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">between</td>
				<td><ol>
						<li>minimum value</li>
						<li>maximum value</li>
					</ol></td>
				<td><p>Checks is value between values in  action parameters.</p>
				<p>If the input is a checkbox and it is in a group of checkboxes (all with the same name for example <span class="insource">name=&quot;chk[]&quot;</span>)  or select then <span class="insource">between</span> means &quot;<em>number of selected checkboxes (options) must be between values set by action parameters</em>&quot;. See <a href="#groups">example</a>.				</p>
				<p>If you use <span class="insource">between</span> with checkbox or select you should use custom error messages. See <a href="#errorMessageAttr">errorMessageAttr</a> option.</p></td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">max</td>
				<td><ol>
						<li>maximum value</li>
					</ol></td>
				<td><p>Checks is value less or equel than action parameter value.</p>
					<p> If the input is a checkbox and it is in a group of checkboxes (all with the same name for example <span class="insource">name=&quot;chk[]&quot;</span>) then <span class="insource">max</span> means &quot;<em>select no more then max checkboxes</em>&quot;. See <a href="#groups">example</a>.</p>
					<p> If the input is a select  then <span class="insource">max</span> means &quot;<em>select no more then max options</em>&quot;.</p>
					<p>If you use <span class="insource">max</span> with checkbox or select you should use custom error messages. See <a href="#errorMessageAttr">errorMessageAttr</a> option.</p></td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">min</td>
				<td><ol>
						<li>minimum value</li>
					</ol></td>
				<td><p>Checks is value greater or equel than action parameter value.</p>
					<p>If the input is a checkbox and it is in a group of checkboxes (all with the same name for example <span class="insource">name=&quot;chk[]&quot;</span>) then <span class="insource">min</span> means &quot;<em>select at least min checkboxes</em>&quot;. See <a href="#groups">example</a>.</p>
					<p> If the input is a select  then <span class="insource">min</span> means &quot;<em>select at least min options</em>&quot;.</p>
					<p>If you use <span class="insource">min</span> with checkbox or select you should use custom error messages. See <a href="#errorMessageAttr">errorMessageAttr</a> option.</p></td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">rangelength</td>
				<td><ol>
						<li>minimum length</li>
						<li>maximum length</li>
					</ol></td>
				<td>Checks if length of the value is between action parameters values. </td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">maxlength</td>
				<td><ol>
						<li>maximum length</li>
					</ol></td>
				<td>Checks if length of the value is smaller than action parameter value. </td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">minlength</td>
				<td><ol>
						<li>minimum length</li>
					</ol></td>
				<td>Checks if length of the value is greater than action parameter value. </td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">differs</td>
				<td><ol>
						<li>element id</li>
					</ol></td>
				<td>The value has to be diferent from the value of field which ID is passed as parameter.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">equalto</td>
				<td><ol>
						<li>element id</li>
					</ol></td>
				<td>The value has to be equel to the value of field which ID is passed as parameter.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">extension</td>
				<td><p>file extensions</p></td>
				<td><span class="fp"><a name="extension" id="valempty4"></a></span>Checks if  value ends with '<span class="insource">.</span>' followed by any of passed parameters.<br />
				You can put as many file extensions you need as parameters to this action. For example: <span class="insource">extension[jpg:png:txt]</span><br /></td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">ip4</td>
				<td>&nbsp;</td>
				<td>Checks if the value is a valid IPv4 address.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">ip6</td>
				<td>&nbsp;</td>
				<td>Checks if the value is a valid IPv6 address. <br />
				<strong>NOTE</strong> that this action uses complex regular expression which can be pretty slow and  <strong>doesn't work in Chrome</strong> which shows &quot;Aw, Snap!&quot; page! So be careful where you use this action or make your own custom action for IPv6 address validation.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">valempty</td>
				<td>&nbsp;</td>
				<td><span class="fp"><a name="valempty" id="valempty"></a></span>Validate field even if it's not marked as <a href="#required"><span class="insource">required</span></a> and is empty. This action makes sense only if some other custom validator action is also used on that field and the field is not <a href="#required"><span class="insource">required</span></a>. For example, you can have an input box that can be  empty in some cases that depend on some other field. In that case you cannot put  <a href="#required"><span class="insource">required</span></a> action on it because it can be empty, but you need to validate it even if its empty. See <a href="#dependinginputs">example</a>.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">ajax</td>
				<td><ol>
					<li>URL  for the ajax request</li>
				</ol></td>
				<td><p><span class="fp"><a name="ajax" id="valempty3"></a></span>Action for server side validation with ajax. As the action argument put URL for the ajax request, but keep in mind that URL should not contain characters  which bValidator uses to parse actions and parameters. Those are by default semicolon and comma (see <a href="#paramsDelimiter">paramsDelimiter</a> and <a href="#actionsDelimiter">actionsDelimiter</a> options). So use relative URLs  or absolute from server root. For example: <span class="insource">				<br />
				data-bvalidator=&quot;ajax[/validate/checkusername],required&quot;.</span></p>
				<p>bValidator  tries to be smart and to optimize requests to the server:</p>
				<ul>
					<li> It will use asynchronous and synchronous ajax calls depending on the situation. Sometimes it must use synchronous call for example before form submit.</li>
					<li>bValidator  will not make ajax request if a value is invalid by some other validator. But this depends on the actions order in <span class="insource">data-bvalidator</span> attribute. If you don't want to make ajax request if value is already invalid put the ajax action in the last place. For example: <br />
						<span class="insource">data-bvalidator=&quot;email,ajax[/url]&quot;</span>					</li>
					<li>It  will not make ajax request if a value of the input is not changed from the last  check with ajax. It will use cached result.</li>
					</ul>
				<p>See also <a href="#ajaxAnswerValid">options</a> regarding ajax and <a href="#validationajaxaction">example</a>.</p></td>
			</tr>
		</table>
		<p>&nbsp;</p>
		<h3>Modifying	actions </h3>
		<p>Here is the list of built-in modifiers. Custom modifiers can be added  like custom validation functions (see <a href="#usingmodifiers">example</a>).</p>
		<table width="100%" border="0" cellpadding="0" cellspacing="0" class="table1">
			<tr>
				<th nowrap="nowrap">Modifier</th>
				<th>Parameters</th>
				<th>Description</th>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">trim</td>
				<td>&nbsp;</td>
				<td><span class="fp"><a name="trim" id="valempty2"></a></span>Removes the whitespaces from the beginning and end of the input value.</td>
			</tr>
		</table>
	</div>
	
	
<!-- section -->
	
	
	<h1>API functions<a name="api" id="api"></a></h1>
	<div class="content">
		<p>When you make an instance of validator you can call some functions on that instance. You can access validator instance through jQuery <span class="insource">data</span> function:</p>
		<blockquote>
			<pre class="showsource">&lt;script type=&quot;text/javascript&quot;&gt;
	
	$('#myform').bValidator();
	
	// check if form is valid
	if($('#myform').data('bValidator').isValid()){
		// do somenthing
	}

&lt;/script&gt;</pre>


<p><span class="insource"><a name="data_bValidators" id="data_bValidators"></a>.data('bValidator')</span> will return  reference to the first instance of bValidator.<br />
	You can have more instances of bValidator  on the same form (see <a href="#moreinstances">example 12</a>) and all references are returned by <span class="insource">.data('bValidator<strong>s</strong>')</span>. <strong>Note</strong> the  '<strong>s</strong>' here.</p>
<pre class="showsource">&lt;script type=&quot;text/javascript&quot;&gt;
	
	$('#myform').bValidator();
	$('#myform').bValidator(null, 'secondInstanceName');
	
	// validate form with the first instance
	$('#myform').data(&quot;bValidators&quot;).first.validate();

	// validate form with the second instance
	$('#myform').data(&quot;bValidators&quot;).secondInstanceName.validate();

&lt;/script&gt;</pre>

		</blockquote>
		<p>
		<a name="note06" id="note06"></a><strong>NOTE:</strong> prior to version 0.6 you could get validator instance like this:
		<blockquote>
		<pre class="showsource">&lt;script type=&quot;text/javascript&quot;&gt;

	var instance = $('#myform').bValidator();

&lt;/script&gt;</pre>
		<p>From version 0.6 plugin function doesn't return
			validator instance to maintain chainability. Now you can do for example:</p>
			<pre class="showsource">&lt;script type=&quot;text/javascript&quot;&gt;
	
	// bind validator on all forms on page
	$('form').bValidator();

	// or bind validator on all forms on page and set some css for the forms
	$('form').bValidator().css('width', '100%');

&lt;/script&gt;</pre></blockquote>
		<p>&nbsp;</p>
		<table width="100%" border="0" cellpadding="0" cellspacing="0" class="table1">
			<tr>
				<th nowrap="nowrap">Function</th>
				<th>Arguments</th>
				<th>Description</th>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">getOptions</td>
				<td>&nbsp;</td>
				<td>Returns the options object of the current validator instance.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">isValid</td>
				<td><ol>
					<li>jQuery object containing inputs to check only <br />
						(optional)</li>
				</ol></td>
				<td>Just checks if inputs in current validator instance are valid. Doesn't show error messages.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">removeMsg</td>
				<td><ol>
						<li>jQuery object 
						containing inputs</li>
					</ol></td>
				<td>Removes (hides) the  message</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">showMsg</td>
				<td><ol>
					<li>jQuery object 
						containing inputs</li>
					<li>string message</li>
				</ol></td>
				<td>Displays message. This function doesn't have anything with validation, it just displays tooltip message on the element specified with the first argument. Message can be displayed for any element on a page. Element doesn't have to be part of the form  (or container element) for which bValidator is instanced.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">getInputs</td>
				<td>&nbsp;</td>
				<td>Returns all input fields associated with the validator.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">bindValidateOn</td>
				<td><ol>
						<li>jQuery object 
						containing inputs </li>
					</ol></td>
				<td><span class="fp"><a name="bindValidateOn" id="bindValidateOn"></a></span>This function is helpful when using <span class="insource"><a href="#validateOn">validateOn</a></span> option and dynamic   forms. If you add some new input elements to the form after validator is already initialized and you want to validate them on event specified with <span class="insource">validateOn</span> option you need to call this method.<br />
				If you are not using <span class="insource">validateOn</span> option with dinamic forms you can forget about this function.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">reset</td>
				<td><ol>
					<li>jQuery object 
						containing inputs<br />
						(optional)					</li>
				</ol></td>
				<td>Resets the validator. Hides all error messages like the validator is only initialized. If you have a reset button on your form this    function is automatically bind to it. </td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">destroy</td>
				<td>&nbsp;</td>
				<td>Removes existing bValidator instance.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">validate</td>
				<td><ol>
						<li><a name="validate" id="validate"></a>if true error messages are not displayed <br />
						(optional)</li>
						<li>jQuery object containing inputs to validate only (optional)</li>
					</ol></td>
				<td>Does validation.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">getValidators</td>
				<td>&nbsp;</td>
				<td><p><a name="getActions" id="validate2"></a>Returns the object with all built-in validator <a href="#actions">action functions</a> of the current validator instance. This is useful for adding custom validator actions which are not accessible from global scope or overriding existing built-in actions. For example, you can add your validation function like this:<br />
				</p>
					<pre class="showsource">&lt;script type=&quot;text/javascript&quot;&gt;
	$('#myform').bValidator();
					
	$('#myform').data('bValidator').getValidators().myAction = 
		function(valueObject){
			// do something here and return true or false
			if(valueObject.value == 'valid')
				return true
			return false
		}
&lt;/script&gt;</pre>
				<strong>Note</strong> that parameter passed to validator functions  is object with <span class="insource">'value'</span> property which holds the input value. This is not the case with custom validator functions in global scope where the first parameter is  input value.</td>
			</tr>
			<tr>
				<td nowrap="nowrap" class="fp">getModifiers</td>
				<td>&nbsp;</td>
				<td><p><a name="getModifiers" id="validate3"></a>Returns the object with all built-in modifiers of the current validator instance. This is useful for adding custom modifier actions which are not accessible from global scope or overriding existing built-in actions. For example, you can add your modifier function like this:<br />
				</p>
				<pre class="showsource">&lt;script type=&quot;text/javascript&quot;&gt;
	$('#myform').bValidator();
					
	$('#myform').data('bValidator').getModifiers().myMod = 
		function(oldValue){
			// ... change oldValue
			return 'modifiedValue';
		}
&lt;/script&gt;</pre></td>
			</tr>
		</table>
	</div>


<!-- section -->

	
	<h1>Examples<a name="examples" id="examples"></a></h1>
	<div class="content">You can see source of each example by clicking on the 'Show  source' button.</div>
	
	
<!-- section -->
	
	
	<h2>1 - All validators in action<a name="allvalidators" id="allvalidators"></a>
<input type="button" data-for-example="ex1" value="Show source" class="show_source_btt"/></h2>
	<div id="ex1s" class="showsource_ex" style="display:none"> </div>
	<div class="content">
<div id="ex1sv">
<form id="form1" method="post">
	<div style="display:table">
		<div style="display:table-cell;width:55%">
			<p>Alphabetic characters only:<br />
				<input type="text" data-bvalidator="alpha,minlength[10],required"/>
			</p>
			<p>Alphanumeric characters only:<br />
				<input type="text" data-bvalidator="alphanum,required"/>
			</p>
			<p>Only digits:<br />
				<input type="text" data-bvalidator="digit,required"/>
			</p>
			<p>Number:<br />
				<input type="text" data-bvalidator="number,required"/>
			</p>
			<p>Email:<br />
				<input type="text" data-bvalidator="email,required"/>
			</p>
			<p>Url:<br />
				<input type="text" data-bvalidator="url,required"/>
			</p>
			<p>Date in format dd.mm.yyyy:<br />
				<input type="text" data-bvalidator="date[dd.mm.yyyy],required"/>
			</p>
			<p>Minimum value 10:<br />
				<input type="text" data-bvalidator="min[10],required"/>
			</p>
			<p>Value between 100 and 200:<br />
				<input type="text" data-bvalidator="between[100:200],required"/>
			</p>
			<p>IPv4 address:<br />
				<input type="text" data-bvalidator="ip4,required"/>
			</p>
		</div>
		<div style="display:table-cell">
			<p>Minimum length is 10 characters:<br />
				<input type="text" data-bvalidator="minlength[10],required"/>
			</p>
			<p>Maximum length is 10 characters:<br />
				<input type="text" data-bvalidator="maxlength[10],required"/>
		</p>
			<p>Valid length is between 10 and 20 characters:<br />
				<input type="text" data-bvalidator="rangelength[10:20],required"/>
			</p>
			<p>Value of the inputs must be equal:<br />
				<input type="text" id="equalto1"/>
				<input type="text" data-bvalidator="equalto[equalto1],required"/>
			</p>
			<p>Value of the inputs must not be equal:<br />
				<input type="text" id="differs1"/>
				<input type="text" data-bvalidator="differs[differs1],required"/>
			</p>
			<p>Select .jpg, .png or .txt file<br />
				<input type="file" data-bvalidator="extension[jpg:png:txt],required" data-bvalidator-msg="Please select file of type .jpg, .png or .txt"/>
			</p>
			<p>This checkbox is required:<br />
				<input name="a" type="checkbox" value="1" data-bvalidator="required,required"/>
			</p>
			<p>Select at least two checkboxes:<br />
				<input name="b[]" type="checkbox" value="1" />
				<input name="b[]" type="checkbox" value="1" />
				<input name="b[]" type="checkbox" value="1" data-bvalidator="min[2],required" data-bvalidator-msg="Select at least two checkboxes"/>
			</p>
			<p>Select no more than 2 options:<br />
				<select size="5" multiple="multiple" data-bvalidator="required,max[2],required" data-bvalidator-msg="Select no more than 2 options" >
					<option value="1">One</option>
					<option value="2">Two</option>
					<option value="3">Three</option>
					<option value="4">Four</option>
				</select>
			</p>
			<p>Choose one:
				<input name="e" type="radio" value="1" />
				<input name="e" type="radio" value="1" />
				<input name="e" type="radio" value="1" data-bvalidator="required" data-bvalidator-msg="Select one radio button"/>
			</p>
		</div>
	</div>
	<p>
		<input type="submit" value="Submit" />
		<input type="reset" value="Reset" />
	</p>
</form>


<script type="text/javascript">   
	$(document).ready(function () {
		$('#form1').bValidator();
	});
</script> 
</div>
	</div>
	
	
<!-- section -->
	
	
	<h2>2 - Input specific error message<a name="inputerrmsgs" id="inputerrmsgs"></a>
<input type="button" value="Show source" class="show_source_btt" data-for-example="ex2"/></h2>
	<div id="ex2s" class="showsource_ex" style="display:none"> </div>
	<div class="content">
<div id="ex2sv">
<form id="form2" method="post">
	<p> Enter string containing 'aaa' substring:
		<input type="text" data-bvalidator="regex[a{3}],required" data-bvalidator-msg="Plese enter string containing 'aaa' substring."/>
	</p>
	<p>
		<input type="submit" value="Submit" />
		<input type="reset" value="Reset" />
	</p>
</form>


<script type="text/javascript">   
	$(document).ready(function () {
		$('#form2').bValidator();
	});
</script> 
</div>
	In this example <span class="insource">regex</span> validator action is used (<span class="insource">regex[a{3}]</span>) and error message which is defined in <span class="insource">data-bvalidator-msg</span> attribute.
	</div>
	
	
<!-- section -->


	<h2>3 - Custom validators<a name="customaction" id="customaction"></a> 
		<input type="button" data-for-example="ex3" value="Show source" class="show_source_btt"/></h2>
	<div id="ex3s" class="showsource_ex" style="display:none"> </div>
	<div class="content"> 
<div id="ex3sv">
<script type="text/javascript">   
	$(document).ready(function () {
		$('#form3').bValidator();
	});
	
	function myvalidator(number, devideBy){
		number = parseFloat(number);
		if(number % parseInt(devideBy) == 0)
			return true;
		return false;
	}
	
</script>


<form id="form3" method="post">
	<p> Enter a number which is divisible by 3:
		<input type="text" data-bvalidator="myvalidator[3],number,required" data-bvalidator-msg="Enter a number which is divisible by 3."/>
	</p>
	<p> Enter a number which is divisible by 4:
		<input type="text" data-bvalidator="myvalidator[4],number,required" data-bvalidator-msg="Enter a number which is divisible by 4."/>
	</p>
	<p>
		<input type="submit" value="Submit" />
		<input type="reset" value="Reset" />
	</p>
</form>
</div>
		<p>This example shows how you can  create   your own validation action. Just make a function that returns <span class="insource">true</span> for successful validation and <span class="insource">false</span> for an error and put the function name in <span class="insource">data-bvalidator</span> attribute. See also this <a href="#dependinginputs">example</a>.<br />
			You can see also in this example how to use parameters with  your own validation action. You can  put error message for your validation function in options object as described <a href="#localization">above</a>, just call it the same as your validation function.<br />
		See also <a href="#getActions">getActions</a> API function if your validation function is not accessible from global scope.	</p>
	<p><strong>Note</strong> that from version 0.7 <span class="insource">this</span> keyword inside custom validator function refers to the DOM element on which validation is performed.</p>
	<p><strong>Note</strong> that first argument of a custom validator function will be a value of the input and other arguments (if any) are parameters for that action stated in square brackets  after the action name in the <span class="insource">data-bvalidator</span> attribute.  Custom validator function should return <span class="insource">true</span> or <span class="insource">false</span>.</p>
	</div>
	
	
<!-- section -->
	
	
	<h2>4 - Dynamic forms<a name="dynamicforms" id="dynamicforms"></a>
<input type="button" data-for-example="ex4" value="Show source" class="show_source_btt"/></h2>
	<div id="ex4s" class="showsource_ex" style="display:none"> </div>
	<div class="content"> 
<div id="ex4sv">
<script type="text/javascript">   
	$(document).ready(function () {
		$('#form4').bValidator();
	});
</script>


<form id="form4" method="post">
	<div id="form4more"> </div>
	<input type="button" value="Add more elements" onclick="$('#form4more').append('Enter a number: &lt;input type=\'text\' data-bvalidator=\'number,required\' /&gt;&lt;br /&gt;');"/>
	<input type="button" value="Show / Hide" onclick="$('#form4sh').toggle(400);"/>
	
	<div id="form4sh"> Enter alphanumeric string:
		<input type="text" data-bvalidator="alphanum,required" />
	</div>
	<p> Enter a number:
		<input type="text" data-bvalidator="number,required" />
	</p>
	<p> Enter Email:
		<input type="text" data-bvalidator="required,email" />
	</p>
	<p>
		<input type="submit" value="Submit" />
		<input type="reset" value="Reset" />
	</p>
</form>
</div>
		<p>You can dynamically   add inputs to the form after the validator is initialized. Note that <strong>hidden form elements are not validated</strong>. If you need to hide or show some form elements, put them into some container element (like <span class="insource">&lt;div id=&quot;form4sh&quot;&gt;</span> in this example) and then show or hide that container because validation messages will not follow show/hide actions if you apply them only on the input element which is validated.<br />
			If you use <a href="#validateOn"><span class="insource">validateOn</span></a> option, then after adding new input to form you can call <a href="#bindValidateOn">bindValidateOn</a> function for new added inputs to bind <span class="insource">validateOn</span> event on them also.</p>
	</div>
	
	
<!-- section -->
	
	
	<h2>5 - Server side validation<a name="serversidevalidation" id="serversidevalidation"></a>
<input type="button" data-for-example="ex5" value="Show source" class="show_source_btt"/></h2>
	<div id="ex5s" class="showsource_ex" style="display:none"> </div>
	<div class="content"> 
<div id="ex5sv">
<script type="text/javascript">   
	
	var options5 = {
		errorValidateOn: null
	}
	
	$(document).ready(function () {
		$('#form5').bValidator(options5);
	});
	
	function checkUsername(username){
		
		var ret = false;
		
		$.ajax({
			type: 'POST',
			url: 'ajax_response.txt',
			async: false,
			data: {'username':username},
			success: function(data){
				if(data == 'ok')
					ret = true
			}
		});

		return ret;
	}
</script>


<form id="form5" method="post">
	<p> Choose username:
		<input type="text" data-bvalidator="checkUsername,required" data-bvalidator-msg="This username is not valid or already taken."/>
	</p>
	<p>
		<input type="submit" value="Submit" />
		<input type="reset" value="Reset" />
	</p>
</form>
</div>
		<p>This example is similar to custom validators example <a href="#customaction">above</a>. Just make your own validator action function which will do synchronus AJAX request that will check if value is valid.</p>
	In version 0.7 <a href="#ajax" class="insource">ajax</a> validation function is added and it is nicer way to do server side validation. See <a href="#validationajaxaction">example</a>.</div>
	

<!-- section -->
	
	
	<h2>6 - Error message position and style<a name="positionstyle" id="positionstyle"></a>
		<input type="button" data-for-example="ex6" value="Show source" class="show_source_btt"/></h2>
	<div id="ex6s" class="showsource_ex" style="display:none"> </div>
	<div class="content">
<div id="ex6sv">
<script type="text/javascript">			
	
	var options6 = {
		offset:              {x:5, y:-2},
		position:            {x:'right', y:'center'},
		template:            '<div class="{errMsgClass}">{message}</div>',
		showCloseIcon:       false,
		classNamePrefix:     'ex6_',
		validateOn:          'keyup'
	};
	
	$(document).ready(function () {
		$('#form6').bValidator(options6);
	});
	
	
</script>


<form id="form6" method="post">
	<p> Username:
		<input type="text" data-bvalidator="alphanum,required" />
	</p>
	<p> Password:
		<input type="password" id="form6pass" data-bvalidator="required"/>
	</p>
	<p> Password again:
		<input type="password" data-bvalidator="equalto[form6pass],required" />
	</p>
	<p>
		<input type="submit" value="Submit" />
		<input type="reset" value="Reset" />
	</p>
</form>
</div>
		<p>You can set template, position and CSS styles for error messages. See also <a href="#oldbrowser">example 9</a>.</p>
	</div>
	
	
<!-- section -->
	
	
	<h2>7 - Instance on &lt;div&gt; element<a name="divvalidation" id="divvalidation"></a>
		<input type="button" value="Show source" class="show_source_btt" data-for-example="ex7"/></h2>
	<div id="ex7s" class="showsource_ex" style="display:none"> </div>
	<div class="content">
<div id="ex7sv">
<script type="text/javascript">			
	
	$(document).ready(function () {
		$('#div7').bValidator();
	});
	
	function checkIfValid(){
		if($('#div7').data('bValidator').validate())
			alert ('Is valid!');
	}
	
</script>


<div id="div7">
	<p>Only digits:
		<input type="text" data-bvalidator="digit,required" />
	</p>
	<p>
		<input name="Button" type="button" value="Validate &lt;div&gt;" onclick="checkIfValid();"/>
	</p>
</div>
</div>
		<p>bValidator doesn't care if  inputs are not inside a <span class="insource">&lt;form&gt;</span> element. It will work on any container element that has some child inputs that can be validated. Of course, you won't have submit button in that case and validation will not be automatically bind to it, but you can call it manually like in this example.</p>
	</div>
	
	
<!-- section -->
	
	
	<h2>8 - Groups of checkboxes and radio buttons<a name="groups" id="groups"></a>
		<input type="button" value="Show source" class="show_source_btt" data-for-example="ex8"/></h2>
	<div id="ex8s" class="showsource_ex" style="display:none"> </div>
	<div class="content">
	<div id="ex8sv">
<script type="text/javascript">			
	
	$(document).ready(function () {
		$('#form8').bValidator();
	});
	
</script>


<form id="form8" method="post">
	<p>
		Select two or  none:
		<input type="checkbox" name="chk8[]" />
		<input type="checkbox" name="chk8[]" />
		<input type="checkbox" name="chk8[]" />
		<input type="checkbox" name="chk8[]" data-bvalidator="min[2],max[2]" data-bvalidator-msg="Select two or none checkboxes"/>
	</p>
	<p>
		Select one:
		<input type="radio" name="radio8" value="1" />
		<input type="radio" name="radio8" value="2" />
		<input type="radio" name="radio8" value="3" />
		<input type="radio" name="radio8" value="4" data-bvalidator="required" data-bvalidator-msg="Select radio"/>
	</p>
	<p>Select between three and five:<br />
		<input type="checkbox" name="chk81[]" />
		<input type="checkbox" name="chk81[]" />
		<input type="checkbox" name="chk81[]" />
		<input type="checkbox" name="chk81[]" data-bvalidator="between[3:5],required" data-bvalidator-msg="Number of selected checkboxes must be between 3 and 5"/>
		<br />
		<input type="checkbox" name="chk81[]" />
		<input type="checkbox" name="chk81[]" />
		<input type="checkbox" name="chk81[]" />
		<input type="checkbox" name="chk81[]" />
		<br />
		<input type="checkbox" name="chk81[]" />
		<input type="checkbox" name="chk81[]" />
		<input type="checkbox" name="chk81[]" />
		<input type="checkbox" name="chk81[]" />
	</p>
	<p>
		<input type="submit" value="Submit" />
		<input type="reset" value="Reset" />
	</p>
</form>
</div>
		<p>A group of checkboxes or radio buttons is created by giving  the same  name attribute to all elements in the group. bValidator attributes for <a href="#validateActionsAttr">actions</a> and <a href="#errorMessageAttr">custom error message</a> should be added to only one element in the group  on which error message will be shown. As of bValidator version 0.6 you can have element names with some value in [] like <span class="insource">name=&quot;chk81[abc]&quot;</span>.</p>
	</div>
	

<!-- section -->


<h2>9 - For old browsers<a name="oldbrowser" id="oldbrowser"></a>
	<input type="button" value="Show source" class="show_source_btt" data-for-example="ex9"/></h2>
	<div id="ex9s" class="showsource_ex" style="display:none"> </div>
	<div class="content">
<div id="ex9sv">
<style type="text/css">
	
	/* invalid input */
	.ex9_bvalidator_invalid{
		background-color: #FFFFAE;
	}
	
	/* error message */
	.ex9_bvalidator_errmsg {
		background-color:#333;
		font-size:10px;
		border:1px solid #999;
		color:#FFF;
		white-space:nowrap;
		padding-right: 10px;
		padding-left: 5px;
		font-family: Arial, Helvetica, sans-serif;
	}
	
	/* close icon */
	.ex9_bvalidator_errmsg .ex9_bvalidator_close_icon {
		margin-left: 5px;
		margin-top: -2px;
		font-family: Arial, Helvetica, sans-serif;
		font-weight: bold;
		color:#F96;
		cursor:pointer;
	}
	
	/* arrow */
	.ex9_bvalidator_errmsg em {
		display:block;
		height: 9px;
		width: 18px;
		position:absolute;
		bottom:-9px;
		left:5px;
		background-image: url(http://bojanmauser.from.hr/bvalidator/arrow.gif);
		background-repeat: no-repeat;
	}
</style>

<script type="text/javascript">			
	
	var options9 = {
		classNamePrefix:   'ex9_bvalidator_',
		templateCloseIcon: '<table><tr><td>{message}</td><td><div class="{closeIconClass}">x</div></td></tr></table>'
	};
	
	$(document).ready(function () {
		$('#form9').bValidator(options9);
	});
	
</script>


<form id="form9" method="post">
	<p>Only digits:
		<input type="text" data-bvalidator="digit,required" />
		<br />
		<br />
		Minimum value 10:
		<input type="text" data-bvalidator="min[10],required"/>
	</p>
	<p>
		<input type="submit" value="Submit" />
	</p>
</form>
</div>
		<p>Some people live in the past and they love their favorite browser IE6. This example will work nice in IE6. CSS styles are changed to use image for arrow and <a href="#templateCloseIcon" class="insource">templateCloseIcon</a> option is used to replace default template with one that uses tables.</p>
	</div>


<!-- section -->


<h2>10 - Put error messages into container<a name="allerrors" id="allerrors"></a> 
	<input type="button" value="Show source" class="show_source_btt" data-for-example="ex10"/></h2>
	<div id="ex10s" class="showsource_ex" style="display:none"> </div>
	<div class="content"> 
<div id="ex10sv">
<script type="text/javascript">   
	
	var options10 = {
		
		// shows or hides error all messages container after validation completes
		onAfterAllValidations: function(elements, formIsValid){
			
			// if validation failed or there are some visible error messages
			if(!formIsValid || $('#ex10errors > :visible').length)
				$('#ex10errors').show();
			else
				$('#ex10errors').hide();
		},
		
		// shows or hides error messages for each form element
		onAfterElementValidation: function(element, errorMessages){
			
			// Make ID for elment that will be container for error messages.
			// Note that ID of the form element must be set if you want to do it this way.
			var containerID = 'err' + element.attr('id');
			
			// container jQuery element
			var container = $('#' + containerID);
			
			// if there are any error messages
			if(errorMessages.length){
				
				// make new container element
				if(!container.length){
					$('#ex10errors').append('<div id="' + containerID + '"></div>');
					 container = $('#' + containerID);
				}
				// clean container
				else
					container.html('');
				
				// put each error message into it's error messages container
				for(var i = 0; i < errorMessages.length; i ++){
					container.append(errorMessages[i] + '<br />');
				}
				
				container.show();
			}
			else
				container.hide();
			
			// return 0 to only disable bValidator error messages
			return 0;
		}
	};
	
	
	$(document).ready(function () {
		$('#form10').bValidator(options10);
	});
	
</script>


<div style="height:60px">
<div id="ex10errors"></div>
</div>
<form id="form10" method="post">
	<p>IPv4 address:
		<input id="form10ip" type="text" data-bvalidator="ip4,required" />
	</p>
	<p> Select something:
		<select id="form10select" data-bvalidator="required" data-bvalidator-msg="Select something from drop-down menu.">
			<option value=""></option>
			<option value="one">one</option>
			<option value="two">two</option>
			<option value="three">three</option>
		</select>
	</p>
	<p>
		<input type="submit" value="Submit" />
		<input type="reset" value="Reset" onclick="$('#ex10errors').hide()"/>
	</p>
</form>
</div>
		<p>This example shows how to put error messages into the container element. This functionality is not built-in into the bValidator, but you can achieve it by using callbacks. <a href="#onAfterAllValidations">onAfterAllValidations</a> and <a href="#onAfterElementValidation">onAfterElementValidation</a> callbacks are used in this example.</p>
	</div>


<!-- section -->


<h2>11 - Depending inputs<a name="dependinginputs" id="dependinginputs"></a> 
	<input type="button" value="Show source" class="show_source_btt" data-for-example="ex11"/></h2>
	<div id="ex11s" class="showsource_ex" style="display:none"> </div>
	<div class="content"> 
<div id="ex11sv">
<script type="text/javascript">   
	
	$(document).ready(function () {
		$('#form11').bValidator();
	});
	
	function checkMyInputs(value, field){
		
		if(field == '1'){
			if(!value && $('#val_2').val())
				return false;
		}
		else if(field == '2'){
			if(!value && $('#val_1').val())
				return false;
		}
		return true;
	}
	
</script>


<form id="form11" method="post">
	<p>
		Value 1:
		<input id="val_1" type="text" data-bvalidator="checkMyInputs[1],valempty" data-bvalidator-msg="Please enter value in both fields or leave them empty"/>
	</p>
	<p>
		Value 2:
		<input id="val_2" type="text" data-bvalidator="checkMyInputs[2],valempty" data-bvalidator-msg="Please enter value in both fields or leave them empty"/>
	</p>
	<p>Enter something in both fiels or leave them empy.</p>
	
	<p>
		<input type="submit" value="Submit" />
		<input type="reset" value="Reset" />
	</p>
</form>
</div>
	<p>In this example validation of one input field that depends on value entered in another field. This is achieved with <span class="insource">checkMyInputs</span> custom  action.<br />
		This example also shows the use of <a href="#valempty"><span class="insource">valempty</span></a> action which is	used to trigger <span class="insource">checkMyInputs</span> action even if the field is empty. If you need both fields to be required then you should use <a href="#required"><span class="insource">required</span></a> action instead of  <a href="#valempty"><span class="insource">valempty</span></a> action.</p>
</div>


<!-- section -->


<h2>12 - More types of error messages<a name="moreinstances" id="moreinstances"></a> 
	<input type="button" value="Show source" class="show_source_btt" data-for-example="ex12"/></h2>
	<div id="ex12s" class="showsource_ex" style="display:none"> </div>
	<div class="content"> 
<div id="ex12sv">
<script type="text/javascript">   
	
	// options for first instance
	var options12 = {
		classNamePrefix: 'bvalidator_red_'
	};
	
	// options for second instance (for warning messages)
	var optionsWarning12 = {
		errorMessageAttr:    'data-bvalidator-warning-msg',
		validateActionsAttr: 'data-bvalidator-warning',
		classNamePrefix:     'bvalidator_gray2_',
		position:            {x:'right', y:'center'},
		offset:	             {x:15, y:0},
		template:            '<div class="{errMsgClass}"><div class="bvalidator_gray2_arrow"></div><div class="bvalidator_gray2_cont1">{message}</div></div>',
		hideMsgIfExistsForInstance: ['first'],
		validateOn:          'keyup',
		validateOnSubmit:     false
	};
	
	
	$(document).ready(function () {
		// note that order of these lines is important
		$('#form12').bValidator(options12); // first instance
		$('#form12').bValidator(optionsWarning12, 'secondInstance'); // second instance
	});
	
</script>


<form id="form12" method="post">
	<p>
		minimum 5 characters:
		<input type="text" data-bvalidator="minlength[5],required" data-bvalidator-msg="Please enter 5 characters." data-bvalidator-warning="alpha" data-bvalidator-warning-msg="It would be nice if you enter only letters." />
	</p>
	<p>&nbsp;</p>
	<p>
		Numbers are preferred:
			<input type="text" data-bvalidator="required" data-bvalidator-warning="digit" data-bvalidator-warning-msg="Numbers are prefered here." />
	</p>
	<p>
		<input type="submit" value="Submit" />
		<input type="reset" value="Reset" />
	</p>
</form>
</div>
	<p>Try to enter numbers and letters in both fields to see two types of error messages. From version 0.6 you can have more instances of bValidator on the same form (container element). In this example there are two bValidator instances for the same form. Red messages are  messages from the first validator instance and gray are from the second validator instance.<br />
		For every validator instance you can have it's own settings. Instances are totally independent from each other like they are bind to two different forms so you can adjust settings for each instance as you like. In this example second instance is configured just to show warning messages and not to stop form from submitting. <br />
		See <a href="#data_bValidators">here</a> how to access validator instances if you need to call some functions on them and also see <a href="#themes">themes section</a> below for changing messages style. See also  <a href="#justmessages">example 13</a>.</p>
	</div>


<!-- section -->


<h2>13 - Just displaying messages<a name="justmessages" id="justmessages"></a> 
	<input type="button" value="Show source" class="show_source_btt" data-for-example="ex13"/></h2>
	<div id="ex13s" class="showsource_ex" style="display:none"> </div>
	<div class="content"> 
<div id="ex13sv" style="padding-top:40px">
<script type="text/javascript">   
	
	// options for second instance
	var options131 = {
		classNamePrefix: 'bvalidator_red_'
	};
	
	// options for third instance
	var options132 = {
		classNamePrefix: 'bvalidator_orange_'
	};
	
	$(document).ready(function () {
		$('#div13').bValidator(); // first instance
		$('#div13').bValidator(options131, 'secondInstance'); // second instance
		$('#div13').bValidator(options132, 'thirdInstance'); // third instance
	});
	
	// function that shows messages
	function showMessges13(){
		$('#div13').data('bValidators').first.showMsg($('#input131'), 'This is message');;
		$('#div13').data('bValidators').thirdInstance.showMsg($('#spant133'), 'bla Bla Bla');
		$('#div13').data('bValidators').first.showMsg($('#input134'), '123');
		$('#div13').data('bValidators').secondInstance.showMsg($('#input135'), 'Hi there');
	}
	
	// function that hides messages
	function hideMessges13(){
		$('#div13').data('bValidators').first.removeMsg($('#input131'));
		$('#div13').data('bValidators').thirdInstance.removeMsg($('#spant133'));
		$('#div13').data('bValidators').first.removeMsg($('#input134'));
		$('#div13').data('bValidators').secondInstance.removeMsg($('#input135'));
	}
	
</script>


<div id="div13">
	<input id="input134" type="text" />
	<input id="input135" type="text" />
	<input id="input131" type="text" />
	<span id="spant133" style="background-color:#99C">&lt;span&gt; element</span>
</div>

<p>
	<input name="Button" type="button" value="Show messages" onclick="showMessges13()" />
	<input name="Button" type="button" value="Hide messages" onclick="hideMessges13()" />
</p>

</div>
	<p>In this example no validation is done. Just tooltip messages are displayed. This can be  useful for example if you validate all your data on the server and just want to show messages to a user or want to show some other information in tooltip messages beside validation messages.<br />
	Note that messages can be displayed on any element, it doesn't have to be input and it doesn't have to be inside container element that bValidator is bind on. In this example more instances of bValidator are used for various styles of error messages (see also<a href="#moreinstances"> example 12</a>).</p>
	</div>


<!-- section -->


<h2>14 - Using modifiers<a name="usingmodifiers" id="usingmodifiers"></a> 
	<input type="button" value="Show source" class="show_source_btt" data-for-example="ex14"/></h2>
	<div id="ex14s" class="showsource_ex" style="display:none"> </div>
	<div class="content"> 
<div id="ex14sv" style="padding-top:40px">
<script type="text/javascript">   
	
	$(document).ready(function () {
		$('#form14').bValidator();
	});
	
	function myDigitsModifier(oldValue){
		return oldValue.replace(/[^0-9\.]/g, "") // leave only digits
	}
	
	function myUrlModifier(oldValue){
		if(oldValue.substring(0, 4) != 'http')
			return 'http://' + oldValue
	}
	
</script>


<form id="form14" method="post">
	<p>
		Enter E-mail:
			<input type="text" data-bvalidator="email,required" />
		(put some whitespaces in the beginning or the end)</p>
	<p>
		Enter only digits:
		<input type="text" data-bvalidator="digit,required" data-bvalidator-modifier="myDigitsModifier" /> 
		(try to enter some letters)
	</p>
	<p>
		Enter URL:
		<input type="text" data-bvalidator="url,required" data-bvalidator-modifier="myUrlModifier" /> 
		(try to enter without http://)
	</p>
	<p>
		Enter some word:
		<input type="text" data-bvalidator-modifier="trim" /> 
		(put some whitespaces in the beginning or the end)
	</p>
	<p>
		<input type="submit" value="Submit" />
		<input type="reset" value="Reset" />
	</p>
</form>


</div>
	<p>Modifiers are functions which purpose is to change the input value before validation. This can be useful to clean up data user has entered for example to strip whitespaces or similar. Modifiers are called before all validation actions. By default modifiers should be listed in <span class="insource">data-bvalidator-modifier</span> attribute just like validators in <span class="insource">data-bvalidator</span> attribute (see <a href="#modifyActionsAttr" class="insource">modifyActionsAttr</a> option).	For some validation actions <a href="#trim" class="insource">trim</a> modifier is automatically called (see <a href="#autoModifiers" class="insource">autoModifiers</a> option).</p>
	<p>In this example on the first field trim modifier is automatically called because <span class="insource">email</span> action is mentioned by default in  <a href="#autoModifiers" class="insource">autoModifiers</a> option.<br />
	On the second field custom modifier is called which will delete all but digits. Generally it is not good idea to use  modifiers that change user input in that way, but it is here for the example.<br />
	The third field will add 'http://' if you enter URL without it and also automatically trim spaces.<br />
	The fourth field has only modifier action, no validation at all. 
		You can use only modifier actions on the field without <span class="insource">data-bvalidator</span> attribute and validation.</p>
<p><strong>Note</strong> that first argument of a custom modifier function will be a value of the input and other arguments (if any) are parameters for that action stated in square brackets  after the action name in the <span class="insource">data-bvalidator-modifier</span> attribute.  Custom modifier function should return a new value for the input field. If nothing (<span class="insource">undefined</span>) is returned the input value wont't be changed.</p></div>



<!-- section -->


<h2>15 - Server side validation with  <span class="insource">ajax</span> action<a name="validationajaxaction" id="validationajaxaction"></a> 
	<input type="button" value="Show source" class="show_source_btt" data-for-example="ex15"/></h2>
	<div id="ex15s" class="showsource_ex" style="display:none"> </div>
	<div class="content"> 
<div id="ex15sv" style="padding-top:40px">
<script type="text/javascript">

	$(document).ready(function () {
		$('#form15').bValidator();
	});
</script>


<form id="form15" method="post">
	<p>
		Enter username:
		<input type="text" data-bvalidator="email,required,ajax[ajax_response.txt]" data-bvalidator-msg-ajax="Username is already taken." />
	</p>
	<p>
		Enter number:
		<input type="text" data-bvalidator="digit,required,ajax[ajax_response.txt]" data-bvalidator-msg-ajax="The number is not in our records." /> 
	</p>
	<p>
		<input type="submit" value="Submit" />
		<input type="reset" value="Reset" />
	</p>
</form>


</div>
	<p>In this example both fields use server side validation using <a href="#ajax" class="insource">ajax</a> action. For a value to be valid the response from the server should be string specified in <a href="#ajaxAnswerValid" class="insource">ajaxAnswerValid</a> option. It also shows use of <span class="insource">data-bvalidator-msg-<em>ajax</em></span> attribute to set message only for <span class="insource">ajax</span> action (<a href="#localization">see more</a> about defining messages).<br />
		Please check documentation for all <a href="#ajaxAnswerValid">ajax options</a> and description for <a href="#ajax" class="insource">ajax</a> action.</p>
</div>

<!-- section -->

<h1>Themes<a name="themes" id="themes"></a></h1>
<div class="content">In the examples below you can see how to make your own theme for bValidator by changing CSS and some configuration options. See also <a href="#oldbrowser">example 9</a> and <a href="#positionstyle">example 6</a>.<br />
	CSS files for all themes listed here are also included in the <a href="http://code.google.com/p/bvalidator/downloads/list">download archive</a>.<br />
	If you  make a nice theme
please send  it to <span id="myEmail">me</span> and I will include it into this section.</div>


<!-- section -->


	<h2>Gray 2<a name="themegray2" id="themegray2"></a>
	<input type="button" value="Show source" class="show_source_btt" data-for-example="theme3"/></h2>
	<div id="theme3s" class="showsource_ex" style="display:none"> </div>
	<div class="content">
<div id="theme3sv">
<script type="text/javascript">			
	
	var optionsGray2 = {
		classNamePrefix:   'bvalidator_gray2_',
		position:          {x:'right', y:'center'},
		offset:	           {x:15, y:0},
		template:          '<div class="{errMsgClass}"><div class="bvalidator_gray2_arrow"></div><div class="bvalidator_gray2_cont1">{message}</div></div>'		
	};
	
	$(document).ready(function () {
		$('#formtheme3').bValidator(optionsGray2);
	});
	
	
</script>
<form id="formtheme3" method="post">
	<p>&nbsp;</p>
	<p>Only digits:
		<input type="text" data-bvalidator="required,digit"/>
		<br />
		</p>
	<p>Enter 10 or more alphabetic characters:
	<input type="text" data-bvalidator="required,alpha,minlength[10]"/>
		</p>
	<p>
		Select:
		<input name="ch2zv43" type="checkbox" value="1" data-bvalidator="required" data-bvalidator-msg="Please select the checkbox"/>
		<br />
	</p>
	<p>
		<input type="submit" value="Submit" />
		<input type="reset" value="Reset" />
	</p>
</form>
</div>
	<p>
		Download CSS file for this theme <a href="../themes/bvalidator.theme.gray2.css">here</a>.</p>

	</div>

<!-- section -->


	<h2>Bootstrap (right-center)<a name="themebootstrap" id="themebootstrap"></a><a name="themebootstrap_rc"></a>
		<input type="button" value="Show source" class="show_source_btt" data-for-example="theme5"/></h2>
	<div id="theme5s" class="showsource_ex" style="display:none"> </div>
	<div class="content">
<div id="theme5sv">
<script type="text/javascript">			
	
	var optionsBootstrap = {
		classNamePrefix:   'bvalidator_bootstraprc_',
		position:          {x:'right', y:'center'},
		offset:	           {x:15, y:0},
		template:          '<div class="{errMsgClass}"><div class="bvalidator_bootstraprc_arrow"></div><div class="bvalidator_bootstraprc_cont1">{message}</div></div>',	
		templateCloseIcon:   '<div style="display:table"><div style="display:table-cell">{message}</div><div style="display:table-cell"><div class="{closeIconClass}">&#215;</div></div></div>'
	};
	
	$(document).ready(function () {
		$('#formtheme5').bValidator(optionsBootstrap);
	});
	
	
</script>
<form id="formtheme5" method="post">
	<p>&nbsp;</p>
	<p>Only digits:
		<input type="text" data-bvalidator="required,digit"/>
		<br />
		</p>
	<p>Enter 10 or more alphabetic characters:
	<input type="text" data-bvalidator="required,alpha,minlength[10]"/>
		</p>
	<p>
		Select:
		<input name="ch2zrr43" type="checkbox" value="1" data-bvalidator="required" data-bvalidator-msg="Please select the checkbox"/>
		<br />
	</p>
	<p>
		<input type="submit" value="Submit" />
		<input type="reset" value="Reset" />
	</p>
</form>
</div>
	<p>
		This theme is inspired from <a href="http://getbootstrap.com">Bootstrap</a> project. Download CSS file for this theme <a href="../themes/bvalidator.theme.bootstrap.rc.css">here</a>.</p>

	</div>
	

<!-- section -->


	<h2>Bootstrap (right-top)<a name="themebootstrap_rt" id="themebootstrap_rt"></a>
	<input type="button" value="Show source" class="show_source_btt" data-for-example="theme6"/></h2>
	<div id="theme6s" class="showsource_ex" style="display:none"> </div>
	<div class="content">
<div id="theme6sv">
<script type="text/javascript">			
	
	var optionsBootstrap2 = {
		classNamePrefix:   'bvalidator_bootstraprt_',
		offset:	           {x:-27, y:-6},
		template:          '<div class="{errMsgClass}"><div class="bvalidator_bootstraprt_arrow"></div><div class="bvalidator_bootstraprt_cont1">{message}</div></div>',	
		templateCloseIcon:   '<div style="display:table"><div style="display:table-cell">{message}</div><div style="display:table-cell"><div class="{closeIconClass}">&#215;</div></div></div>'
	};
	
	$(document).ready(function () {
		$('#formtheme6').bValidator(optionsBootstrap2);
	});
	
	
</script>
<form id="formtheme6" method="post">
	<p>&nbsp;</p>
	<p>Only digits:
		<input type="text" data-bvalidator="required,digit"/>
		<br />
		</p>
	<p>Enter 10 or more alphabetic characters:
	<input type="text" data-bvalidator="required,alpha,minlength[10]"/>
		</p>
	<p>
		Select:
		<input name="ch2zrr43" type="checkbox" value="1" data-bvalidator="required" data-bvalidator-msg="Please select the checkbox"/>
		<br />
	</p>
	<p>
		<input type="submit" value="Submit" />
		<input type="reset" value="Reset" />
	</p>
</form>
</div>
	<p>
		This theme is inspired from <a href="http://getbootstrap.com">Bootstrap</a> project. Download CSS file for this theme <a href="../themes/bvalidator.theme.bootstrap.rt.css">here</a>.</p>

	</div>


<!-- section -->


	<h2>Gray 3<a name="themegray3" id="themegray3"></a>
		<input type="button" value="Show source" class="show_source_btt" data-for-example="theme7"/></h2>
	<div id="theme7s" class="showsource_ex" style="display:none"> </div>
	<div class="content">
<div id="theme7sv">
<script type="text/javascript">			
	
	var optionsGray3 = {
		classNamePrefix:   'bvalidator_gray3_',
		offset:	           {x:-28, y:-6},
		template:          '<div class="{errMsgClass}"><div class="bvalidator_gray3_arrow"></div><div class="bvalidator_gray3_cont1">{message}</div></div>',	
		templateCloseIcon:   '<div style="display:table"><div style="display:table-cell">{message}</div><div style="display:table-cell"><div class="{closeIconClass}">&#215;</div></div></div>'
	};
	
	$(document).ready(function () {
		$('#formtheme7').bValidator(optionsGray3);
	});
	
	
</script>
<form id="formtheme7" method="post">
	<p>&nbsp;</p>
	<p>Only digits:
		<input type="text" data-bvalidator="required,digit"/>
		<br />
		</p>
	<p>Enter 10 or more alphabetic characters:
	<input type="text" data-bvalidator="required,alpha,minlength[10]"/>
		</p>
	<p>
		Select:
		<input name="ch2zrr43" type="checkbox" value="1" data-bvalidator="required" data-bvalidator-msg="Please select the checkbox"/>
		<br />
	</p>
	<p>
		<input type="submit" value="Submit" />
		<input type="reset" value="Reset" />
	</p>
</form>
</div>
	<p>
		Download CSS file for this theme <a href="../themes/bvalidator.theme.gray3.css">here</a>.</p>

	</div>
	


	
	
<!-- section -->


	<h2>Post-it<a name="themepostit" id="themepostit"></a>
	<input type="button" value="Show source" class="show_source_btt" data-for-example="theme4"/></h2>
	<div id="theme4s" class="showsource_ex" style="display:none"> </div>
	<div class="content">
<div id="theme4sv">
<script type="text/javascript">			
	
	var optionsPostIt = {
		classNamePrefix:   'bvalidator_postit_',
		offset:	           {x:-29, y:-10},
		template:          '<div class="{errMsgClass}">{message}<div class="bvalidator_postit_pointer"><div class="bvalidator_postit_inner_pointer"></div></div></div>'
	};
	
	$(document).ready(function () {
		$('#formtheme4').bValidator(optionsPostIt);
	});
	
	
</script>
<form id="formtheme4" method="post">
	<p>&nbsp;</p>
	<p>Only digits:
		<input type="text" data-bvalidator="required,digit"/>
		<br />
		</p>
	<p>Enter 10 or more alphabetic characters:
	<input type="text" data-bvalidator="required,alpha,minlength[10]"/>
		</p>
	<p>
		Select:
		<input name="ch2zrr43" type="checkbox" value="1" data-bvalidator="required" data-bvalidator-msg="Please select the checkbox"/>
		<br />
	</p>
	<p>
		<input type="submit" value="Submit" />
		<input type="reset" value="Reset" />
	</p>
</form>
</div>
	<p>
		This theme is from <a href="http://www.ninja-scripts.com/?p=40" target="_blank">ninja-scripts</a> blog. Download CSS file for this theme <a href="../themes/bvalidator.theme.orange.css">here</a>.</p>

	</div>


<!-- section -->

	<h2>Orange<a name="themeorange" id="themeorange"></a>
	<input type="button" class="show_source_btt" value="Show source" data-for-example="theme1"/></h2>
	<div id="theme1s" class="showsource_ex" style="display:none"> </div>
	<div class="content">
<div id="theme1sv">
<script type="text/javascript">			
	
	var optionsOrange = {
		classNamePrefix: 'bvalidator_orange_'
	};
	
	$(document).ready(function () {
		$('#formtheme1').bValidator(optionsOrange);
	});
	
	
</script>
<form id="formtheme1" method="post">
	<p>&nbsp;</p>
	<p>Only digits:
		<input type="text" data-bvalidator="required,digit"/>
		<br />
		</p>
	<p>Enter 10 or more alphabetic characters:
	<input type="text" data-bvalidator="alpha,minlength[10],required"/>
		</p>
	<p>
		Select:
		<input name="ch23123" type="checkbox" value="1" data-bvalidator="required" data-bvalidator-msg="Please select the checkbox"/>
		<br />
	</p>
	<p>
		<input type="submit" value="Submit" />
		<input type="reset" value="Reset" />
	</p>
</form>
</div>
	<p>
		Download CSS file for this theme <a href="../themes/bvalidator.theme.orange.css">here</a>.</p>

	</div>
	
	
	
<!-- section -->


	<h2>Red<a name="themered" id="themered"></a>
	<input type="button" value="Show source" class="show_source_btt" data-for-example="theme2"/></h2>
	<div id="theme2s" class="showsource_ex" style="display:none"> </div>
	<div class="content">
<div id="theme2sv">
<script type="text/javascript">			
	
	var optionsRed = {
		classNamePrefix: 'bvalidator_red_'
	};
	
	$(document).ready(function () {
		$('#formtheme2').bValidator(optionsRed);
	});
	
	
</script>
<form id="formtheme2" method="post">
	<p>&nbsp;</p>
	<p>Only digits:
		<input type="text" data-bvalidator="required,digit"/>
		<br />
		</p>
	<p>Enter 10 or more alphabetic characters:
	<input type="text" data-bvalidator="alpha,minlength[10],required"/>
		</p>
	<p>
		Select:
		<input name="ch234f43" type="checkbox" value="1" data-bvalidator="required" data-bvalidator-msg="Please select the checkbox"/>
		<br />
	</p>
	<p>
		<input type="submit" value="Submit" />
		<input type="reset" value="Reset" />
	</p>
</form>
</div>
	<p>
		Download CSS file for this theme <a href="../themes/bvalidator.theme.red.css">here</a>.</p>

	</div>


<!-- section -->


<!-- main div --></div>




<script type="text/javascript">

$(document).ready(function () { 
	$('form').not('#donate_form').submit(function() {
		alert('Form is submitted.');
		return false;
	});
});


ML="<thf.aol s@i>e=:brug\"cm/";
MI="0582A=3>DF5;716?@F5B9=A:CF5;74E6FD<F=0G5<";
OT="";
for(j=0;j<MI.length;j++){
OT+=ML.charAt(MI.charCodeAt(j)-48);
}
$('#myEmail').html(OT);


</script>
</body>
</html>
